微客导航 » 文章资讯 » Vue 样式绑定的实现方法

Vue 样式绑定的实现方法

2023-08-31 18:51:04 172

学习Vue的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。因为:class和:style里的数组语法和对象语法和data里绑定的值是不太一样的。这篇文章就简单对Vue绑定做个总结。

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是属性，所以可用v-bind处理，通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门增强，表达式结果类型除了字符串之外，还可是对象或数组。

绑定Class

对象语法

data里的属性是负责toggle是否要这个class，也就是一般定义Boolean类型的值。

这里用isActive和hasError定义是否需要active和text-danger类。

data:{
isActive:true,
hasError:false
}

渲染为

数组语法

data里负责定义CSS类名。

这里定义了activeClass和errorClass的CSS类名是active和text-danger。

data:{
activeClass:'active',
errorClass:'text-danger'
}

渲染为

混合写法

可以用混合的形式来绑定class，即数组语法里写对象语法。所以data里的数据主要用于：

这里定义了errorClass的CSS类名为text-danger，并用isActive定义是否需要active类。

data:{
errorClass:'text-danger',
isActive:true
}

渲染为

绑定Style

对象语法

data里的属性是定义style里的值。与class不一样，class是定义是否要这个class的。

这里定义了style里的color和font-size的值。

data:{
activeColor:'red',
fontSize:30
}

渲染为

数组语法

可以绑定多个样式对象到style上

这里在data里用styleObject定义了color和font-size，再用overridingStyles定义了background和margin。然后在组件里用数组进行混合绑定。

data:{
styleObject:{
color:'red',
fontSize:'13px'
},
overridingStyles:{
background:'green',
margin:'13px'
}
}

渲染为

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。