1. 品牌管理案例
实现功能:
1. 添加新品牌
2. 删除品牌
3. 根据条件筛选品牌
步骤:
1.1、搭建项目的基本界面的结构
- 引入bootstrap
- 引入vue
- 2、实现表格的渲染
使用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>
- 3、实现新增的功能
- 数据绑定,为了能在后面拿到这数据。
- 定义一个方法,给按钮添加一个事件。
- 点击这个按钮之后为什么会进行页面的刷新,因为这个按钮是定义在表单里的,所以点击这个按钮会触发表单的提交,这个时候可以组织按钮的默认事件。
- 绑定事件的方法可以加括号也可以不加,加上括号之后可以给这个方法传递参数。
示例:
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 = '';
}
- 4、实现删除的功能
思路
- 获取删除元素的索引