该文详细介绍了如何使用Vue.js和Bootstrap4.x来创建一个应用，包括渲染表格数据、实现添加、删除和修改品牌的功能，以及使用Switch开关和全局过滤器。通过v-for指令、事件绑定、双向数据绑定等Vue特性，实现了动态交互的品牌管理界面。
1.案例效果
2.用到的知识点
bootstrap 4.x 相关的知识点：
卡片（Card）、表单相关(Forms)、按钮(Buttons)、表格(Tables)
vue指令与过滤器相关的知识点：
插值表达式、属性绑定、事件绑定、双向数据绑定、修饰符、条件渲染、列表渲染、全局过滤器
3.整体实现步骤
①创建基本的vue实例
②基于Vue渲染表格数据
③实现添加品牌的功能
④实现删除品牌的功能
⑤实现修改品牌状态的功能
3.1 创建基本的vue实例
步骤1：导入vue的js文件
步骤2：在<body>标签中声明el区域：
步骤3;创建vue实例对象
3.2基于vue渲染表格的数据
步骤1：使用v-for指令循环渲染表格的数据：
步骤2：将品牌的状态渲染为Switch开关效果：
Switch开关效果的官方文档地址：
https://v4.bootcss.com/docs/components/forms/#switches
步骤3：使用全局过滤器对时间进行格式化：
3.3添加品牌
步骤1：阻止表单的默认提交行为：
步骤2：为input输入框进行v-model双向数据绑定：
注意：需要在data数据中声明brandname属性字段
步骤3：为“添加品牌”的button按钮绑定click事件处理函数：
步骤4：在data中声明nextId属性（用来记录下一个可用的id值），并在methods中声明addNewBrand事件处理函数：
步骤5：监听input输入框的keyup事件，通过.esc按键修饰符快速清空文本框中的内容：
3.4删除品牌
步骤1：为删除的a链接绑定click点击事件处理函数，并阻止其默认行为：
扫一扫
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
