vue-03-style与class

Posted 2021-01-10 wenbronk

1, 绑定html class

1), 直接绑定

   <div>
      isActive 为true， 则显示 active css
      <p v-bind:class="{active: isActive}">哈哈</p>
    </div>

 

data() {
      return {
        isActive: true,
      }
    },

2), 多个值可通过对象的方式绑定: 

<!--可以绑定为对象-->
    <div>
      <p v-bind:class="styleObj"> 哈哈 </p>
    </div>

 

data() {
      return {
        styleObj: {
          active: true,
          ‘demo‘: true
        }
      }
    },

3), 通过computed 绑定: 

<div>
      <p v-bind:class="styleObj1"> 哈哈哈啊</p>
    </div>

computed: {
      styleObj1() {
        return {
          "active": this.isActive,
          "demo": this.isDemo
        }
      }
    }

4) , 数组语法

<!--使用表达式绑定-->
    <ul>
      <li :class="[{active: index % 2 == 0}, ‘info-‘ + id]" v-for="(name, index) in names ">{{ name }}</li>
    </ul>

data() {
      return {
        isActive: true,
        isDemo: true,
        styleObj: {
          active: true,
          ‘demo‘: true
        },
        id: 10,
        demo1: "demo11",
        demo2: "demo22",
        names: [‘wenbronk‘, ‘vini‘, ‘lisa‘],
        stob: {
          color: "red",
          fontSize: "24px"
        }
      }
    },

5), 绑定内联样式

<!--绑定内联样式-->
    <div>
      <p :style="stob"> 内敛样式 </p>
    </div>

stob: {
          color: "red",
          fontSize: "24px"
        }