1、案例1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表渲染</title>
</head>
<body>
<div id="app">
<!--在v-for里使用数组-->
<ul>
<li v-for="(item,index) in persons">
{{item.name}}---{{item.age}}---{{item.address}}---{{index}}---
<button @click="deleteFunc(index)">删除</button>
<button @click="updateFunc(index,{name:'xiaofang',age:16,address:'安陆'})">更新</button>
</li>
</ul>
<!--在v-for里使用对象-->
<ul>
<li v-for="(value,key) in person">
{{key}}---{{value}}
</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript"></script>
<script>
/*
vue只是监视了数组persons,默认对其里面的对象的改变并没有监视。
数组更新检测：
Vue将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。
这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
*/
const vm = new Vue({
el: "#app",
data: {
persons: [
{ "name": "liuyang", "age": 18, "address": "湖北" },
{ "name": "zhangsan", "age": 28, "address": "广东" },
{ "name": "xiaoming", "age": 19, "address": "北京" }
],
person: { "name": "xiaoming", "age": 19, "address": "北京" }
},
methods: {
deleteFunc(idx) {
//删除下标为idx的元素
this.persons.splice(idx, 1);
},
updateFunc(idx, newPerson) {
//删除下标为idx的元素,并在原来位置插入新元素
this.persons.splice(idx, 1, newPerson);
}
}
});
</script>
</body>
</html>