案例由浅到深，逐步深入。
一 、案例1：v-for的使用方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!--遍历数组--><h2>人员列表</h2><ul><li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li></ul><!--遍历对象--><h2>汽车信息</h2><ul><li v-for="(value,key) in car" :key="key">{{value}}--{{key}}</li></ul></div>
</body>
<!--p.id是动态绑定ID，给每个li都加上了ID -->
<script type="text/javascript" :key="p.id">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:"#root",data:{persons:[{id:1,name:"张三",age:18},{id:2,name:"李四",age:19},{id:3,name:"王五",age:20},],car:{name:"奥迪A8",price:"70万",color:"black"}}})
</script>
</html>二、key的原理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>key的原理</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!--遍历数组--><h2>人员列表</h2><button @click.once="add">添加一个人员</button><ul><li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li></ul></div>
</body><script type="text/javascript" :key="p.id">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:"#root",data:{persons:[{id:1,name:"张三",age:18},{id:2,name:"李四",age:19},{id:3,name:"王五",age:20},]},methods:{add(){const p = {id:"4",name:"老刘",age:21}this.persons.unshift(p)}}})
</script>
</html>三、列表过滤，可以通过watch和computed两种方法实现
1、watch方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字（支持模糊搜索）" v-model="keyword"><ul><li v-for="p in filPersons" :key="p.id">{{p.name}}-{{p.age}}--{{p.sex}}</li></ul></div>
</body>
<!--p.id是动态绑定ID，给每个li都加上了ID -->
<script type="text/javascript" :key="p.id">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// 用watch实现new Vue({el:"#root",data:{keyword:"",persons:[{id:1,name:"马冬梅",age:18,sex:"女"},{id:2,name:"周冬雨",age:19,sex:"女"},{id:3,name:"周杰伦",age:20,sex:"男"},{id:4,name:"温兆伦",age:32,sex:"男"},],filPersons:["",]},watch:{keyword:{immediate:true,handler(val){this.filPersons = this.persons.filter((p)=>{return p.name.indexOf(val) !==-1})}}}})
</script>
</html>2、computed方法实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字（支持模糊搜索）" v-model="keyword"><ul><li v-for="p in filPersons" :key="p.id">{{p.name}}-{{p.age}}--{{p.sex}}</li></ul></div>
</body>
<!--p.id是动态绑定ID，给每个li都加上了ID -->
<script type="text/javascript" :key="p.id">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// 用computed实现new Vue({el:"#root",data:{keyword:"",persons:[{id:1,name:"马冬梅",age:18,sex:"女"},{id:2,name:"周冬雨",age:19,sex:"女"},{id:3,name:"周杰伦",age:20,sex:"男"},{id:4,name:"温兆伦",age:32,sex:"男"},],},computed:{filPersons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyword) !== -1})}}})
</script>
</html>
)
