案例1 · vue · 看云

知识点： 1、由于数据的双向绑定，导致HTML结构重组 ``` <input type="text" class="form-control" v-model="keywords"> <tr v-for="item in search(keywords)" :key="item.id"> data: { id: '', name: '', keywords: '', // 搜索的关键字 ... keywords发生变化导致tr函数会重新发生变化，即for循环会重新发生 ``` 2. 循环中可以使用方法 ``` <tr v-for="item in search(keywords)" :key="item.id"> ``` 完整代码 ![](https://img.kancloud.cn/14/ca/14ca5a5523ca9a8d07df268f59708aae_1357x321.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> Id: <input type="text" class="form-control" v-model="id"> </label> <label> Name: <input type="text" class="form-control" v-model="name"> </label>  <input type="button" value="添加" class="btn btn-primary" @click="add()"> <label> 搜索名称关键字： <input type="text" class="form-control" v-model="keywords"> </label> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody>  <tr v-for="item in search(keywords)" :key="item.id"> <td>{{ item.id }}</td> <td v-text="item.name"></td> <td>{{ item.ctime }}</td> <td> <a href="" @click.prevent="del(item.id)">删除</a> </td> </tr> </tbody> </table> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', // 搜索的关键字 list: [ { id: 1, name: '奔驰', ctime: new Date() }, { id: 2, name: '宝马', ctime: new Date() } ] }, methods: { add() { // 添加的方法 var car = { id: this.id, name: this.name, ctime: new Date() } this.list.push(car) this.id = this.name = '' }, del(id) { // 根据Id删除数据 var index = this.list.findIndex(item => { if (item.id == id) { return true; } }) // console.log(index) this.list.splice(index, 1) }, search(keywords) { // 根据关键字，进行数据的搜索 // 注意： forEach some filter findIndex 这些都属于数组的新方法， // 都会对数组中的每一项，进行遍历，执行相关的操作； return this.list.filter(item => { // 注意： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串') // 如果包含，则返回 true ，否则返回 false,如果传入的参数为空，也返回true if (item.name.includes(keywords)) { return item } }) } } }); </script> </body> </html> ~~~