vue动态绑定class的3种方式对象语法和数组语法

动态绑定class的几种方式

1.对象语法行内或计算属性

<style>
    .static {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    .orange {
      border: 1px solid orange;
    }
  </style>
</head>
<body>
  <!-- 对象语法 -->
  <!-- <div id="example" class="static" v-bind:class="{\'orange\': isRipe, \'green\': isNotRipe}"></div> -->
  <div id="example" class="static" v-bind:class="haha"></div>
</body>

  // 01class绑定方法1对象语法
  var vm = new Vue({
    el: "#example",
    data: {
      //   isRipe: true,
      //   isNotRipe: false
      age: 4,
      member: 999
    },
    computed: {
      haha: function() {
        return {
          \'orange\': this.age > 3 ? true : false,
          \'green\': this.member > 1000 ? true : false
        }
      }
    }
  })

方法2数组语法

 // 数组语法 
  <div id="example" class="static" v-bind:class="[class1, class2]"></div>
  var vm = new Vue({
    el: "#example",
    data: {
      class1: \'orange\',
      class2: \'green\'
    }
  })

方法3绑定行内样式

  <!-- 对象语法 -->
  // <div id="app" v-bind:style="{color: color, fontSize: fontSize+\'px\' }">hello world</div> -->
 // <div id="app" v-bind:style="style">hello world</div>
  <div id="app" v-bind:style="haha">hello world</div>
    var vm = new Vue({
      el: \'#app\',
      data: {
        // color: \'pink\',
        // fontSize: 30
        // style: {
        //   color: \'pink\',
        //   fontSize: \'30px\'
        // }
        age: 4,
        member: 9000
      },
      computed: {
        haha : function() {
          return {
            color: this.age >3 ? orange: green,
            fontSize: this.member> 1000 ? \'30px\' :\'10px\'
          }
        }
      }
    })

动态绑定class的几种方式

1.对象语法 行内或计算属性

方法2数组语法

方法3绑定行内样式

1.对象语法行内或计算属性