webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
e8b428dea4
Webcourse/21-Vue基础/01-04.Vue的举例：列表功能.md

430 lines
11 KiB
Markdown
Raw Normal View History

add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
## 列表功能举例
### 步骤 1：列表功能
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
完整的代码如下：
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
```html
<!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`遍历给表格。
上方代码运行的效果：
add：whistle拦截https请求
2018-04-26 22:36:33 +08:00
![](http://img.smyhvae.com/20180401_1517.png)
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
### 步骤 2：无数据时，增加提示
如果list中没有数据，那么表格中就会只显示表头`<th>`，这样显然不太好看。
为此，我们需要增加一个`v-if`判断：当数据为空时，显示提示。如下：
```html
<tr v-show="list.length == 0">
<td colspan="4">列表无数据</td>
</tr>
```
代码解释：`colspan="4"`指的是让当前这个`<td>`横跨4个单元格的位置。如下：
add：whistle拦截https请求
2018-04-26 22:36:33 +08:00
![](http://img.smyhvae.com/20180401_1535.png)
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
### 步骤 3：item的添加
具体实现步骤如下：
add：Vue相关。
2018-04-20 23:44:34 +08:00
（1）用户填写的数据单独存放在data属性里，并采用`v-model`进行双向绑定。
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。
（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
完整的代码如下：
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
```html
<!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的删除
html部分：
```html
<!--绑定delete事件，根据括号里的参数进行删除-->
<td><a href="#" v-on:click="delData(item.id)">删除</a></td>
```
js部分：
```javascript
delData: 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);
}
```
代码解释：`find()`和`findIndex()`是ES6中为数组新增的函数。详细解释如下：
```javascript
// 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function(item){
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
//根据item中的id属性去匹配传进来的id
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
//如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
});
```
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
当item被删除后，v-for会被自动调用。
完整版代码：
```html
<!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
在 Vue 1.0版本中，可以通过`filterBy`这个api进行过滤。
如果item是简单数据类型，可以这样筛选：
```html
<div v-for="item in list | filterBy 'hello'">
```
上方代码的意思是：找到所有item中包含`hello`的指定item。
如果item是一个对象，比如：
```javascript
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
```
上面的list数据中，我要去过滤匹配item中的name属性，可以这样筛选：
```html
<div v-for="item in list | filterBy 'hello（筛选条件值）' in 'name'">
```
但`filterBy`这种系统过滤器只是Vue1.0中的api，在Vue2.0中已经删除了，我们需要自定义过滤器。
add file：ES5中的一些扩展
2018-04-02 10:21:27 +08:00
Reference in New Issue Copy Permalink