05 Vue的举例：列表功能
# 步骤 1：列表功能
<!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><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}</style><script src="vue2.5.16.js"></script>
</head><body><div id="app"><table class="table"><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">删除</a></td></tr></table>
</div></body><script>var vm = new Vue({el: '#app',data: {list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]}})</script></html>
//数据是存放在data的list中的，将data中的数据通过`v-for`遍历给表格# 步骤 2：无数据时，增加提示
<tr v-show="list.length == 0"><td colspan="4">列表无数据</td>
</tr>
//增加一个`v-if`判断：当数据为空时，显示提示
//`colspan="4"`指的是让当前这个`<td>`横跨4个单元格的位置# 步骤 3：item的添加
具体实现步骤如下：
（1）用户填写的数据单独存放在data属性里，并采用`v-model`进行双向绑定。
（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。
（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。
<!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><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}.form {width: 800px;margin: 20px auto;}.form button {margin-left: 10px;}</style><script src="vue2.5.16.js"></script>
</head><body><div id="app"><div class="form">编号：<input type="text" v-model="formData.id">名称：<input type="text" v-model="formData.name"><button v-on:click="addData">添加</button></div><table class="table"><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th><tr v-show="list.length == 0"><td colspan="4">列表无数据</td></tr><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">删除</a></td></tr></table>
</div></body><script>var vm = new Vue({el: '#app',data: {list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}],//用户添加的数据formData: {id: 0,name: ""}},methods: {addData: function () {//将数据追加到list中var p = {id: this.formData.id, name: this.formData.name, ctime: new Date()};this.list.push(p);//清空页面上的文本框中的数据this.formData.id = 0;this.formData.name = '';}}});</script></html># 步骤 4：item的删除
<!--绑定delete事件，根据括号里的参数进行删除--><td><a href="#" v-on:click="delData(item.id)">删除</a></td>```javascriptdelData: function (id) {// 0 提醒用户是否要删除数据if (!confirm('是否要删除数据?')) {//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行return;}// 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值（在数组中的索引值）var index = this.list.findIndex(function (item) {return item.id == id});// 2.0 调用方法：list.splice(待删除的索引, 删除的元素个数)this.list.splice(index, 1);}
// 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，var index = this.list.findIndex(function(item){
//根据item中的id属性去匹配传进来的id
//如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
//return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
});当item被删除后，v-for会被自动调用，进而自动更新view；
完整版代码：
<!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><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}.form {width: 800px;margin: 20px auto;}.form button {margin-left: 10px;}</style><script src="vue2.5.16.js"></script>
</head><body><div id="app"><div class="form">编号：<input type="text" v-model="formData.id"> 名称：<input type="text" v-model="formData.name"><button v-on:click="addData">添加</button></div><table class="table"><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th><tr v-show="list.length == 0"><td colspan="4">列表无数据</td></tr><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><!--绑定delete事件，根据括号里的参数进行删除--><td><a href="#" v-on:click="delData(item.id)">删除</a></td></tr></table></div></body><script>var vm = new Vue({el: '#app',data: {list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],//用户添加的数据formData: {id: 0,name: ""}},methods: {addData: function () {//将数据追加到list中var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };this.list.push(p);//清空页面上的文本框中的数据this.formData.id = 0;this.formData.name = '';}, //注意：方法之间用逗号隔开，这个逗号不要忘记了delData: function (id) {// 0 提醒用户是否要删除数据if (!confirm('是否要删除数据?')) {//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行return;}// 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值var index = this.list.findIndex(function (item) {return item.id == id});// 2 调用方法：list.splice(待删除的索引, 删除的元素个数)this.list.splice(index, 1);}}});</script></html># 步骤 5：按条件筛选item
现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。
- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的。
- 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。
在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。
**方式一**：采用`forEach + indexOf()````javascriptsearch(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item//实现方式一：通过 indexOf() 进行匹配。var newList = [];this.list.forEach(item => {if (item.name.indexOf(keywords) != -1) { //只要不等于 -1，就代表匹配到了newList.push(item)}})return newList}**方式二**： filter + includes()方法```javascriptsearch(keywords) { // 根据关键字，进行数据的搜索，返回匹配的itemvar newList = this.list.filter(item => {// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')// 如果包含，则返回 true ，否则返回 falseif (item.name.includes(keywords)) {return item}})return newList}完整代码：
<!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><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse;/*这一行，不能少：表格的两边框合并为一条*/}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}.form {width: 800px;margin: 20px auto;}.form button {margin-left: 10px;}</style><script src="vue2.5.16.js"></script>
</head><body><div id="app"><div class="form">编号：<input type="text" v-model="formData.id"> 名称：<input type="text" v-model="formData.name"><button v-on:click="addData">添加</button>搜索：<input type="text" v-model="keywords"></div><table class="table"><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th><tr v-show="list.length == 0"><td colspan="4">列表无数据</td></tr><tr v-for="item in search(keywords)"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><!--绑定delete事件，根据括号里的参数进行删除--><td><a href="#" v-on:click="delData(item.id)">删除</a></td></tr></table></div></body><script>var vm = new Vue({el: '#app',data: {list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],//用户添加的数据formData: {id: '',name: ""},keywords: ""},methods: {addData: function () {//将数据追加到list中var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };this.list.push(p);//清空页面上的文本框中的数据this.formData.id = '';this.formData.name = '';}, //注意：方法之间用逗号隔开，这个逗号不要忘记了delData: function (id) {// 0 提醒用户是否要删除数据if (!confirm('是否要删除数据?')) {//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行return;}// 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值var index = this.list.findIndex(function (item) {return item.id == id});// 2 调用方法：list.splice(待删除的索引, 删除的元素个数)this.list.splice(index, 1);},search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的itemvar newList = this.list.filter(item => {// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')// 如果包含，则返回 true ，否则返回 falseif (item.name.includes(keywords)) {return item}})return newList}}});</script></html>06 自定义过滤器：时间格式化举例
过滤器：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。
（1）在插值表达式中这样调用：
```html<p>{{ msg | msgFormat }</p>
```（2）定义过滤器`msgFormat`：
```javascript// Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数// 定义一个 Vue 全局的过滤器，名字叫做 msgFormatVue.filter('msgFormat', function (myMsg) { // function 的第一个参数指的是管道符前面的 msg// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则return myMsg.replace(/单纯/g, '邪恶')})
```