查看“Vue从入门到实战:实例 表格奇偶行应用不同的样式”的源代码
←
Vue从入门到实战:实例 表格奇偶行应用不同的样式
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
我们经常会用表格来显示多行数据,当表格的行数较多时,为了让用户能够区分,我们常会针对奇偶行应用不同的样式。 这就用到了本章所学的样式的绑定。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { width: 600px; } table { border: 1px solid black; } table { width: 100%; } th { height: 50px; } th, td { border-bottom: 1px solid #ddd; text-align: center; } [v-cloak] { display: none; } .even { background-color: #cdcdcd; } </style> </head> <body> <div id = "app" v-cloak> <table> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>价格</th> <th>操作</th> </tr> <tr v-for="(book, index) in books" :key="book.id" :class="{even : (index+1) % 2 === 0}"> <td>{{ book.id }}</td> <td>{{ book.title }}</td> <td>{{ book.price }}</td> <td>{{ book.author }}</td> <td> <button @click="deleteItem(index)">删除</button> </td> </tr> </table> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { books: [ { id: 1, title: 'Vue.js无难事', author: '孙鑫', price: 98 }, { id: 2, title: 'VC++深入详解', author: '孙鑫', price: 168 }, { id: 3, title: 'Servlet/JSP深入详解', author: '孙鑫', price: 139 }, { id: 4, title: 'Java Web开发详解', author: '孙鑫', price: 99 } ] }, methods: { deleteItem(index){ this.books.splice(index, 1); } } }); </script> </body> </html></nowiki>
返回至
Vue从入门到实战:实例 表格奇偶行应用不同的样式
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息