欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中通过v-bind绑定元素的class属性为元素设置样式

程序员文章站 2022-05-15 18:17:55
...

1,直接传递一个数组

 <style>
    .mcolor{
        color:red;
    }
    .mweight{
        font-weight: 200;
    }
    .msize{
        font-size:30px;
    }
    </style>
<h4 v-bind:class="['mcolor','msize','mweight']">这是一个h4标签,用来测试vue中的class样式的</h4>

2,数组中运用三元表达式

<h4 v-cloak v-bind:class="['mcolor','mweight',istrue?'msize':'']">{{msg}}</h4>
var vm=new Vue({
          el:"#app",
          data:{
              msg:"这是一个h4标签,用来测试vue中的class样式的",
              istrue:false
          }
      })

3,数组中嵌套对象(它比三元表达式的数据可读性更好一些)

<h4 v-cloak v-bind:class="['mcolor','mweight',{'msize':istrue}]">{{msg}}</h4>
var vm=new Vue({
          el:"#app",
          data:{
              msg:"这是一个h4标签,用来测试vue中的class样式的",
              istrue:false,
              classobj:{mcolor:true,mweight:true,msize:true}
          }
      })

4,直接使用对象
(1)

<h4 v-cloak v-bind:class="{mcolor:false,mweight:true,msize:true}">{{msg}}</h4>

(2)

<h4 v-cloak v-bind:class="classobj">{{msg}}</h4>
var vm=new Vue({
          el:"#app",
          data:{
              msg:"这是一个h4标签,用来测试vue中的class样式的",
              istrue:true,
              classobj:{mcolor:true,mweight:true,msize:true}
          }
      })