Vue动态样式

1.1动态class

用v-bind给标签class设置动态的值

• 语法:

• :class="{类名: 布尔值}"

​

​

就是把类名保存在vue变量中赋予给标签

代码演示2：

1.2 动态style

给标签动态设置style的值CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

• 语法

• :style="{css属性: 值}"

动态style的key都是css属性名

1.3 案例-品牌管理(铺)

数据铺设

• 需求1: 把默认数据显示到表格上

• 需求2: 注意资产超过100的, 都用红色字体标记出来

细节:

① 先铺设静态页面

② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中

③ 用v-for配合默认数据, 把数据默认铺设到表格上显示

④ 直接在标签上, 大于100价格, 动态设置red类名

图示:

1.因为案例使用了bootstrap, 工程化开发, 模块化用npm/yarn下载引入使用

npm install bootstrap

2.在main.js - 引入bootstrap

import "bootstrap/dist/css/bootstrap.css" 
// 默认找文件夹下的index文件(但是这个不是所以需要写路径)

模板代码

​

​

==正确代码, 不可复制==

1.4 案例-品牌管理(增)

数据新增

• 需求1: 实现表单数据新增进表格功能

• 需求2: 判断用户输入是否为空给提示

• 分析① 添加资产按钮 – 绑定点击事件② 给表单v-model绑定vue变量收集用户输入内容③ 添加数组到数组中④ 判断用户内容是否符合规定

图示:

在上个案例代码基础上接着写

==正确代码,不可复制==

      

        

          

            
          
        
            
        

          

            
          
        
            
        
        添加资产
      
​

1.5 案例-品牌管理(删)

目标: 数据删除

• 需求1: 点击删除的a标签, 删除数据

• 需求2: 删除没数据了要提示暂无数据的tfoot

• 分析① a标签绑定点击事件② 给事件方法传id③ 通过id, 找到对应数据删除④ 删除光了要让tfoot显示⑤ 删除光了再新增, 有bug(id值问题)需要修复

在上个案例代码基础上接着写

正确的代码(==不可复制==)

删除
          

​
bug解决方式：

整体代码展示：

​

​