10、class和style动态绑定
2022-04-01 12:34:12 0 举报AI智能生成
vue
作者其他创作
大纲/内容
VUE思想转变
1、页面中的东西想要变 先到JS中准备数据
2、在基于数据去渲染视图，后期直接改数据即可
动态控制 class 类名
静态样式直接编写即可：<div class="box" style="margin: 20px auto;">
在项目中基于业务需求动态控制元素样式的时候，需要一些特殊的处理
对象方式处理
1、直接写在结构上
语法
:class="{样式类名:响应式数据,...}"
响应式数据为TRUE则有这个样式类，反之则没有
例
结果渲染为：<div class="static active"></div>
注意
v-bind:class 指令也可以与普通的 class 共存。如上
2、写在响应数据中
语法
:class="响应数据（对象）"
例
渲染的结果为：<div class="active"></div>
3、写在计算属性中
语法
:class="返回值是对象的计算属性"
这里绑定一个返回对象的计算属性
例
这是一个常用且强大的模式：
数组控制样式类
语法
:class="[响应式数据1,....]"
控制响应式数据的值是对应的样式类或者没有值，来控制是否有这个样式
例
渲染为：<div class="active text-danger"></div>
注意
1、
如果想根据条件切换列表中的 class，可以用三元表达式：
较繁琐
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
2、
在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
动态控制 style 样式
与动态控制 class 类名基本一致
注意
可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名
0 条评论
下一页
