Vue v-bind动态绑定class实例方法

<ul>
<!--{key（属性名）：value（属性值）}-->
<li :style="{color:color,fontSize:size+'px'}">{{list}}</li>
<!--如果你想属性值原样数组，就必须加上单引号-->
<li :style="{color:'red'}">{{list}}</li>
</ul>
</div>

const app=new Vue({
el:"#app",
data:{
list:"Vue",
color:"red",
　　　　　size:50
},
})

注：对象语法的value（属性值），如果加上单引号就原样输出，不加就输出data的变量值

数组语法绑定

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles,overridingStyles]">{{list}}</div>
const app=new Vue({
  el:"#app",
  data:{
    list:"Vue",
    baseStyles:{fontSize:"50px",color:"red"},
    overridingStyles:{"margin-top":"50px"}
  },
})

以上就是本次介绍的全部相关知识点，感谢大家的学习和对软件开发网的支持。