v-for指令：
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" (:key=“yyy”)
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<body><div id="root"><h2>人员列表（遍历数组）</h2><ul><!-- key不能重复 key可以用index，in可以替换为of--><li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}-----{{index}}</li></ul><h2>汽车信息（遍历对象）</h2><ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul><h2>遍历字符串</h2><ul><li v-for="(char,index) of str" :key="index">{{index}}-{{char}}</li></ul><h2>遍历指定次数</h2><ul><li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li></ul></div><script>new Vue({el: '#root',data: {persons: [{id: '001',name: '张三',age: '18'},{id: '002',name: '李四',age: '19'}, {id: '003',name: '王五',age: '20'}],car: {name: '奥迪A8',price: '70万',color: '黑色'},str: "123468gfds"}})</script>
</body>
key 就是一个唯一标识
<body><div id="root"><h2>人员列表（遍历数组）</h2><button @click.once='add'>添加一个老刘</button><ul><li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}<input type="text"></li></ul><ul><li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li></ul></div><script>new Vue({el: '#root',data: {persons: [{id: '001',name: '张三',age: '18'}, {id: '002',name: '李四',age: '19'}, {id: '003',name: '王五',age: '20'}]},methods: {add() {const p = {id: '004',name: '老刘',age: '40'}//向数组的最前面插入数据this.persons.unshift(p)}}})</script>
</body>
开发中如何选择key?
- 最好使用每条数据的
唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
用计算属性和监视属性实现假的搜索功能，最优操作为计算属性
<body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入姓名" v-model='keyword'><ul><li v-for="(p,index) in filPersons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script>// 用watch实现//#region /* new Vue({el: '#root',data: {keyword: '',persons: [{ id: '001',name: '马冬梅',age: '18',sex: '女'},{id: '002',name: '周冬雨',age: '19', sex: '女'},{id: '003',name: '周杰伦',age: '20',sex: '男'}, {id: '003',name: '温兆伦',age: '20',sex: '男'}],filPersons: []},//用监视属性实现搜索功能watch: {keyword: {immediate: true,handler(val) {this.filPersons = this.persons.filter((p) => {// 每个字符串中都包含''return p.name.indexOf(val) !== -1;})}},}})*///#endregion// 用计算属性实现new Vue({el: '#root',data: {keyword: '',persons: [{id: '001',name: '马冬梅',age: '18',sex: '女'}, {id: '002',name: '周冬雨',age: '19',sex: '女'},{id: '003',name: '周杰伦',age: '20',sex: '男'},{id: '003',name: '温兆伦', age: '20',sex: '男'}],},computed: {filPersons() {return this.persons.filter((p) => {return p.name.indexOf(this.keyword) !== -1;})}}})</script>
</body>
<body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入姓名" v-model='keyword'><button @click='sortType=2'>年龄升序</button><button @click='sortType=1'>年龄降序</button><button @click='sortType=0'>原顺序</button><ul><li v-for="(p,index) in filPersons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script>new Vue({el: '#root',data: {sortType: 0, //0原顺序,1降序 2升序keyword: '',persons: [{id: '001',name: '马冬梅',age: '18',sex: '女'}, {id: '002',name: '周冬雨',age: '19',sex: '女'},{id: '003',name: '周杰伦',age: '20',sex: '男'},{id: '003',name: '温兆伦', age: '20',sex: '男'}],},computed: {filPersons() {const arr = this.persons.filter((p) => {return p.name.indexOf(this.keyword) !== -1});//判断一下是否需要排序if (this.sortType) {arr.sort((p1, p2) => {return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age})}return arr;}}})</script>
</body>
<body><div id="root"><h2>人员列表</h2><button @click="updateMei">更新马冬梅的信息</button><ul><li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script>const vm = new Vue({el: '#root',data: {persons: [{id: '001',name: '马冬梅',age: '18',sex: '女'}, {id: '002',name: '周冬雨',age: '19',sex: '女'},{id: '003',name: '周杰伦',age: '20',sex: '男'},{id: '003',name: '温兆伦', age: '20',sex: '男'}],},methods: {updateMei() {// this.persons[0].name = "马什么梅" //奏效// this.persons[0].age = "50" //奏效this.persons[0] = {id: '001',name: "马什么梅",age: 50}}},})</script>
</body>
以上就是Vue他没有检查到值的变化
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
