v-bind绑定属性样式——class的三种绑定方式

Posted 2020-09-19 千と千寻の

一、class的四种绑定方式

1、布尔值的绑定方式

<div id="demo">
　　<span v-bind:class="{\'class-a\':isA ,\'class-b\':isB}"></span>
</div>

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

2、变量的绑定方式

<div id="demo">
<span :class=[classA,classB]></span>
</div>

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

3、字符串绑定方式

<div id="demo">
　　<span :class="classA"></span>
</div>

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

4、三目运算

<div id="demo">
　　<p :class="isclass?classC:classD"></p>
</div>

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

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

　　　　isclass:true

　　　　}
})

 

 5、综合的写法

<div id="demo">
　　<span :class="[one,{\'classA\':classa,\'classB\':classb}]"></span>
</div>

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

　　　　}
})

 

<p :style="{fontSize:font,color:red}">绑定style</p>

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

  或者

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

<p :style="styleObject">用对象绑定style</p>

 

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

 在methods和computed中写样式用return返回

在methods方法中使用
:style="_sublineStyle(item)"

    _sublineStyle (item) {
      return `-webkit-transform:rotate(${item}deg) translateX(-50%);transform:rotate(${item}deg) translateX(-50%);`
    },

在computed计算属性中使用
:style="[diameter]"

    diameter () {
      return {
        width: this.r * 2 + \'px\',
        height: this.r * 2 + \'px\'
      }
    }