vue ---- 指令综合案例

代码地址： https://codechina.csdn.net/weixin_44235759/vue-brand-list-demo

案例分析：

列表如何渲染

数据源

list: [
      { id: 1, name: '宝马', status: true, now: Date() },
      { id: 2, name: '奔驰', status: false, now: Date() },
      { id: 3, name: '奥迪', status: true, now: Date() },
  ],

1. 使用<tr v-for="item in list" :key="item.id">v-for循环列表
2. 使用差值表达式绑定对应的值<td>{{item.id}}</td>
3. checkbox 的绑定：使用v-model,注意id需要使用属性绑定指令，绑定的内容需要使用表达式保证id唯一
4. 这里的label使用v-if v-else进行显示与隐藏

如何实现删除

1. 在删除的连接中绑定一个点击事件,传入该行的id
   <a href="javascript:;" @click="remove(item.id)">删除</a>
2. 使用过滤器操作数组，留下条件为true的元素，并得到一个新数组返回

   remove(id){
      this.list = this.list.filter(item => item.id !== id)
   },
   

如何实现添加

1. 使用v-model.trim绑定输入框获取输入框中的名称
2. 点击commit按钮会触发form表单的默认提交事件
3. 阻止form的默认提交事件<form @submit.prevent="add">
4. 判断输入框中是否填写
   if(this.band === '') return alert("必须填写品牌名称")
   使用上面格式的条件是if后只有一条语句的时候可以简写成这种形式
   否则就老老实实的鞋if(xxx){xxx; return;}
5. 创建要添加的数据对象
6. 使用push()方法将数据对象push到集合的尾部，注意维护索引以及清空输入框

如何将这里的日期改为自定义格式的日期

使用dayjs库文件 https://dayjs.fenxianglu.cn/

    <!-- 导入dayjs库文件 在window全局，就可以使用dayjs() -->
    <script src="./lib/dayjs.min.js"></script>
    <!-- 使用过滤器 -->
    <td>{{item.now | dateFormat}}</td>

    //声明格式化时间的全局过滤器
    Vue.filter('dateFormat',function(time){
        //对time进行格式化处理 得到 YYYY-MM-DD HH:mm:ss
        //day.js ：是一个操作时间的库文件
        //直接调用 dayjs() 得到的是当前时间
        //dayjs(给定的日期时间) 得到指定的日期
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    })