vue过滤器和修饰符

1. 品牌管理案例

实现功能：

1. 添加新品牌

2. 删除品牌

3. 根据条件筛选品牌

步骤：

1．1、搭建项目的基本界面的结构

1. 引入bootstrap
2. 引入vue

1. 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>

1. 3、实现新增的功能

1. 数据绑定，为了能在后面拿到这数据。
2. 定义一个方法，给按钮添加一个事件。

1. 点击这个按钮之后为什么会进行页面的刷新，因为这个按钮是定义在表单里的，所以点击这个按钮会触发表单的提交，这个时候可以组织按钮的默认事件。
2. 绑定事件的方法可以加括号也可以不加，加上括号之后可以给这个方法传递参数。

示例：

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 = '';

}

1. 4、实现删除的功能

思路

1. 获取删除元素的索引