Style 绑定
数据绑定的一个常见需求场景是操纵元素的 CSS style列表,因为 style
是attribute,我们可以和其他atribute 一样使用 v-ind
将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为 style
的 v-ind
用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组
<template>
<!--正常写-->
<p :sytle="{color:'red',FontSize:'30px'}"> Style绑定1</p>
<!--动态绑定-->
<!--这里的size是没有单位的,所以要在后面增加单位px-->
<p :sytle="{color:activeColor}"> Style绑定2</p>
<!--更简便的写法,直接引用了对象-->
<p :sytle="styleObject"> Style绑定3</p>
<!--绑定一个含多个样式的数组-->
<p :sytle="[styleObject,background]"> Style绑定3</p>
<p>Class样式绑定2</p>
<p>Class样式绑定3</p>
</template>
<script>
export default {
data(){
return{
activeColor:"green"
size:30
styleObject:{
color:"red",
fontSize:"30px"
},
baseStyle:{
background:black
}
}
}
}
</script>