Vue学习小案例

发布于 2021-11-17  177 次阅读


品牌列表案例

一. 案例效果
1.png

二. 整体实现步骤

  1. 创建基本的 vue 实例
  2. 基于 vue 渲染表格数据
  3. 实现添加品牌的功能
  4. 实现删除品牌的功能
  5. 实现修改品牌状态的功能

总结一下我在这个小案例中遇到的一些小问题

第一个:

input的id与label的for冲突问题,导致页面中状态点击任何一个都启用第一个
解决方法:
使用每一个list的id定义input的id跟label的for,解决冲突
2.png

第二个:
添加新的品牌
解决办法:
定义brand为内容输入的内容
定义nextid为id

定义一个点击事件,在点击事件内声明一个object对象,里面添加用户输入的内容。最后将object插入到list内

3.png

   代码  ==>  展开 / 收缩

小小孩子们