HMVue2.3.6【(6)列表渲染指令】
阿新 • • 發佈：2021-11-17
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>View Code