<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h2>数组：</h2>
<h3 v-for="item in names">{{item}}</h3>
<button @click="upd">修改下标为1的小李</button>
<hr>
<h2>对象：</h2>
<h3 v-for="item in list">{{item.name}}</h3>
<button @click="upd1">修改下标为1对象为name小李</button>
<hr>
<h2>案例：</h2>
<div v-for="(item,index) in lists">
<h3>{{item.name}}</h3>
</div>
<button @click="add">添加</button>
<button @click="del">删除</button>
</div>
<script>
//参数
var app = new Vue({
el: "#app", //绑定元素
//所有数据都放在数据属性中
data: {
names: ['小红', '小李', '小花'],
list: [{
name: '小红'
},
{
name: '小李'
},
{
name: '小花'
},
],
lists: [{
name: '小红'
},
{
name: '小李'
},
{
name: '小花'
},
]
},
methods: {
upd() {
this.$set(this.names, 1, '小土豆')
},
upd1() {
//注意：第二个参数为字符 要加''
this.$set(this.list[1], 'name', '小土豆')
},
add() {
// this.$nextTick(()=>{
this.lists.push({
name: '娃哈哈'
})
// });
},
del(index) {
console.log(index);
// this.$nextTick(()=>{
this.lists.pop()
// });
}
}
})
</script>
</body>
</html>
