v-bind绑定属性样式

一、class的四种绑定方式

1、布尔值的绑定方式

　　

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　isA: true,
　　　　　　isB: true
　　　　}
})

2、变量的绑定方式

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　classA:"class-a",
　　　　　　classB:"class-b"
　　　　}
})

3、字符串绑定方式

　　

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　classA:"string"
　　　　}
})

4、三目运算

　　

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{      

　　　　classC:"C",
　　　　classD:"D"，

　　　　isclass:true

　　　　}
})

 

 5、综合的写法

　　

var vm = new Vue({
　　　　el:"#demo",
　　　　data:{
　　　　　　one:"string",
　　　　　　classa:true,
　　　　　　classb:false

　　　　}
})

 

绑定style

背景图片写法  链接有()会和css的url()冲突，需要再用一层引号将其包住
 :style="{background:'url(\''+item.img+'\') no-repeat center/cover'}"

  或者

　　:style="'background:url('+arror+') no-repeat center/cover'"

用对象绑定style

 

 data:{
        font:"24px",
        red:"red",
        styleObject:{
             fontSize:"30px",
             color:"pink"
        }
   }

 

转载于:https://www.cnblogs.com/Model-Zachary/p/6885668.html