【Vue】明白这些类和样式绑定，足够了！
hello，我是小索奇，精心制作的Vue系列持续发放，涵盖大量的经验和示例，由浅入深进行讲解。 本章给大家讲解的是类和样式绑定，前面的章节已经更新完毕，后面的章节持续输出，有任何问题都可以留言或私信哈，一起加油~
类和样式绑定
其中:是v-bind 的缩写)
绑定class样式
写法：
class="soa"，soa可以是字符串、对象、数组字符串写法 :类名不确定,要动态获取
对象写法 :要绑定多个样式,个数&名字也不确定
数组写法 :要绑定多个样式,个数&名字确定,可以进行自定义修改
绑定 style 样式
- 对象写法:
:style="{fontSize: xxx}"其中xxx是动态值 - 数组写法:
:style="[a,b]"其中a、b是样式对象
示例
<div id="root">
<!-- 字符串写法,适用于动态类名 -->
<!-- 这里具体方法实现可以自定义 -->
<div :class="color">{{name}}</div>
<!-- 确定类名数组 -->
<div :class="classArr">{{name}}</div>
<!-- 对象根据条件决定 -->
<div :class="classObj">{{name}}</div>
<!-- style对象 -->
<div :style="styleObj">{{name}}</div>
<!-- style数组 -->
<div :style="styleArr">{{name}}</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '小索奇',
color: '#9900ff',
classArr: ['cls1', 'cls2'],
classObj: {
cls1: false
},
styleObj: {
fontSize: '40px',
color: '#9966ff'
},
styleArr: [
{ fontSize: '40px' },
{ color: '#9900ff' }
]
}
})
</script>
记住一个逻辑：不变写死的可以用css定义，变化的vue定义！
:style绑定的值可以是一个对象,对象中的CSS属性名和属性值会被直接设置为元素的行内样式
这样就可以在模板中方便地切换多个样式属性,而不需要预先在CSS中定义className
当绑定的数据变化时,setStyle会响应式地更新应用到元素上
相比在CSS中预定义,:style绑定可以在运行时动态构建样式对象,非常灵活
而且:style绑定也支持绑定一个数组来应用多个样式对象~
投递华为软件技术有限公司等公司7个岗位 >
美团开奖316人在聊