HMVue2.3.6【(6)列表渲染指令】
1
2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.css"> </head> <body> <div id="app"> <table class="table table-bordered table-hover table-striped"> <!-- 以上三个设置对应：表格边框、鼠标浮于某行时该行高亮、隔行变色 --> <thead> <th>索引</th> <th>Id</th> <th>姓名</th> </thead> <tbody> <!-- 官方建议：只要用到了 v-for 指令，那么一定要利用v-bind绑定一个 :key 属性 --> <!-- 而且，尽量把 id 作为 key 的值 --> <!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 --> <!-- key 的值是千万不能重复的，否则会终端报错：Duplicate keys detected --> <tr v-for="(item, index) in mylist" :key="item.id" :title="item.name"> <!-- 不仅tr的子元素td可以访问遍历数据，tr本身也可以访问 --> <td>{{ index }}</td> <!-- 插值表达式 --> <td>{{ item.id }}</td> <td>{{ item.name }}</td> </tr> </tbody> </table> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el: '#app', data: { mylist: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 4, name: '张三' }, ], } }) </script> </body> </html>
3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 添加用户的区域 --> <div> <input type="text" v-model="name"> <button @click="addNewUser">添加</button> </div> <!-- 用户列表区域 --> <ul> <li v-for="(user, index) in userlist" :key="user.id"> <input type="checkbox" /> 姓名：{{user.name}} </li> </ul> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el: '#app', data: { // 用户列表 userlist: [ { id: 1, name: 'zs' }, { id: 2, name: 'ls' } ], // 输入的用户名 name: '', // 下一个可用的 id 值 nextId: 3 }, methods: { // 点击了添加按钮 addNewUser() { this.userlist.unshift({ id: this.nextId, name: this.name }) this.name = '' this.nextId++ } }, }) </script> </body> </html>
浙公网安备 33010602011771号