实现表格的渲染
使用v-for进行表单的渲染
注意设置key属性
<tr v-for='item in list' :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<!-- 用法就是在变量后面加上竖线 加上过滤器的名称 -->
<td>{{item.ctime | dateFormat('')}}</td>
<td>
<!-- 阻止一下a标签的默认事件 -->
<a href="#" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
实现新增的功能
■ 数据绑定,为了能在后面拿到这数据。
■ 定义一个方法,给按钮添加一个事件。
● 点击这个按钮之后为什么会进行页面的刷新,因为这个按钮是定义在表单里的,所以点击这个按钮会触发表单的提交,这个时候可以组织按钮的默认事件。
● 绑定事件的方法可以加括号也可以不加,加上括号之后可以给这个方法传递参数。
add() {
console.log(this.id, this.name);
// 表单校验
// 1、通过遍历的方式实现
// let flag = true;
// for (let item of this.list) {
// if (item.id == this.id) {
// flag = false;
// }
// }
// if (!flag) {
// alert('您输入的id已经存在了')
// return;
// }
// 1、使用es6的新语法
let flag = this.list.some(item => {
if (item.id == this.id) {
return true;
} else {
return false;
}
})
if (flag) {
alert('您输入的id已经存在了')
return;
}
// 1.拿到输入的数据
// 2.用这个数据构造一个对象
// 3.可以调用数组的方法把这个对象,插入到数组里
// 4.因为vue已经帮我们实现了双向绑定。Vue会监听数据的改变,数据改变之后,vue会帮我们渲染到指定地方。
// 如果能理解第四步,我们的vue就算入门了,我们只关心数据是怎么变的,我们业务逻辑是什么就行了
let obj = {
id: this.id,
name: this.name,
ctime: new Date()
}
this.list.push(obj);
// this.id = '';
// this.name = '';
this.id = this.name = '';
}
实现删除的功能
■ 获取删除元素的索引
● 要想获取索引,需要先获取id,这个id可以传在调用方法的时候传进
● 根据id获取索引
◆ 遍历的方式
◆ 通过es6提供的some方法
■ 调用数组的方法进行删除
● 使用数组的splice方法
del(id) {
// 删除元素的id
// console.log(id);
// 数组中删除,先知道这个元素的索引
// 通过这个splice()方法我们就可以把元素从数组中删除
// 1.获取索引
// 最简单的方法
// for(let item of this.list){
// if(item.id == id){
// // indexOf会找到数组的下标,如果不存在就返回-1
// console.log(this.list.indexOf(item))
// break;
// }
// }
// 还可以使用foreach遍历
//2.使用some方法
// this.list.some((item, index) => {
// if (item.id == id) {
// console.log(index)
// return true;
// }
// })
// 3. es6获取数组索引的方法findIndex()
let index = this.list.findIndex(item => {
if (item.id == id) return true;
})
// 里面的两个参数,第一个是下标,第二个是删除的个数
this.list.splice(index, 1);
}
实现过滤的功能
- 先去获取输入的内容
- 我们应该给列表加一层过滤,返回满足条件的列表
// html
<tr v-for='item in searchList()' :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<!-- 用法就是在变量后面加上竖线 加上过滤器的名称 -->
<td>{{item.ctime}}</td>
<td>
<!-- 阻止一下a标签的默认事件 -->
<a href="#" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
// js...
searchList() {
// 根据我们输入的关键字去构建一个新的列表
// 1.遍历这个数组,拿到一个新的数组
// let newList = [];
// this.list.forEach(item => {
// if (item.name.includes(this.keyword)) {
// newList.push(item);
// }
// })
// return newList;
// 2.ES6里的filter方法
// filter方法直接会返回一个新的数组
let newList = this.list.filter(item => {
// filter的回调方法中返回的是bool值,如果这个bool值是true的话就会被加入到新的数组中
if (item.name.includes(this.keyword)) {
return true;
}
})
return newList;
}
过滤器
注意事项
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
使用语法
■ {{变量 | 过滤器名}}
■ {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器,后面过滤器的data就是前面表达式传过来的值
定义语法
■ 全局定义:
通过Vue提供的filter方法定义:Vue.filter()
参数:过滤器的名字和过滤器执行函数
Vue.filter('dateFormat', function (data, format) {
// 日期格式化
console.log(format);
// 转成date对象
let time = new Date(data);
// 字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
let y = time.getFullYear();
// 这里需要注意的地方,月份是从0开始排序的
let m = (time.getMonth() + 1).toString().padStart(2, '0');
// getDay应该是获取了星期几
// getDate获取日期
let d = time.getDate().toString().padStart(2, '0');
// console.log(y);
// console.log(m);
// console.log(d);
if (format == 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
let h = time.getHours().toString().padStart(2, '0');;
let min = time.getMinutes().toString().padStart(2, '0');;
let secondes = time.getSeconds().toString().padStart(2, '0');;
return `${y}-${m}-${d} ${h}:${min}:${secondes}`;
}
})
■ 私有定义
filters这个是实例化Vue的一个参数,和data,methods平级的,里面放的就是我们这个实例的私有过滤器。
new Vue({
el: '#app',
filters: {
dateFormat(data, format) {
...
}
}
});
■ 注意事项
- 函数的第一个参数都是data,也就是我们要过滤的值。
- 过滤器可以自定义一些参数。
- 过滤器函数的返回值就是最终显示的值