Vue之品牌列表案例

Vue之品牌列表案例

Vue之品牌列表案例

• 直接上代码

直接上代码

<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><!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --><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><!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 --><!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 --><!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 --><tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ ime }}</td><td><!-- 要阻止它进行跳转的默认行为--><a href="" @click.prevent="del(item.id)">删除</a></td></tr></tbody>
</table>