vue.js $set的使用 数组
2024-10-21 11:41:11
[javascript] view plain copy
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
<style>
.blue {
color: blue;
}
</style>
</head> <body>
<div id="example-1">
<ul>
<template v-for="item in items">
<li>
{{$index}}.{{ item.msg }} <button v-on:click="f5(item)">vm.items.splice(index, 1)</button> <button v-on:click="f6(item)">vm.remove</button>
</li>
</template>
</ul> <ul>
<li>
<button v-on:click="f1">vm.items[0] = {} 失效</button>
</li>
<li>
<button v-on:click="f2">vm.items.$set(0, { childMsg: 'Changed!'}) </button>
</li>
<li>
<button v-on:click="f3">vm.items.length = 0 失效</button>
</li>
<li>
<button v-on:click="f4">vm.items={}</button>
</li>
</ul>
<div class="blue">
{{$data | json }}
</div>
<pre>
因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
直接用索引设置元素，如 vm.items[0] = {}；
修改数据的长度，如 vm.items.length = 0。
</pre>
</div>
<script>
var vm = new Vue({
el: '#example-1',
data: {
items: [{
msg: 'Foo'
}, {
msg: 'Bar'
}, {
msg: 'George'
}]
},
methods: {
f1: function() {
vm.items[0] = {}; // 失效
},
f2: function() {
vm.items.$set(0, {
childMsg: 'Changed!'
}) vm.items.$set(2, {
msg: 'dongtao!'
})
},
f3: function() {
vm.items.length = 0; // 失效
},
f4: function() {
vm.items = {}
},
f5: function(item) {
var index = this.items.indexOf(item) //Search an array for the item
if (index !== -1) {
this.items.splice(index, 1) //Selects a part of an array, and returns the new array
}
},
f6: function(item) {
this.items.$remove(item)
}
} })
</script>
</body> </html>
最新文章
- 关于PHP函数time() date() 和 strtotime() 的时区问题
- WinForm DataGridView根据选中的复选框删除
- C#基础01
- WEB前端的原理及组成
- 关于xib文件和storyboard文件的那些事儿
- 利用Resgen.exe 批量生成resources文件
- spring-mvc.xml报错cvc-complex-type.2.4.c
- [C和指针]第五部分
- ajax返回正个页面
- CSS构造模型
- OC 获取城市首字母
- Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用
- python常见的特异点
- python 抓取金融数据，pandas进行数据分析并可视化系列 (一)
- PHP自动测试框架Top 10
- 剑指架构师系列-Redis集群部署
- (办公)mysql安装完,只能通过localhost访问,而不能通过本机ip访问.(转)
- idea快捷键列表
- MYSQL ： The user specified as a definer ('root'@'%') does not exist
- C# Chart使用总结 1 ---------关于图表数据的来源