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