web前端框架vue样式绑定之class绑定对象和数组

样式部分：

<style>
      .active {
        border: 1px solid red;
        width: 100px;
        height: 100px;
      }
      .error {
        background-color: orange;
      }
    </style>

逻辑部分：

<div id="app">
      <div v-bind:class="{active: isActive,error: isError}">
      测试样式
      </div>
      <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          isActive: true,
          isError: true
        },
        methods: {
          handle: function(){
            // 控制isActive的值在true和false之间进行切换
            this.isActive = !this.isActive;
            this.isError = !this.isError;
          }
        }
      });
    </script>

核心思路：通过v-bind:class绑定active和error两个样式的类名，通过true和false控制样式的显示和隐藏，this.isActive = !this.isActive的意思是直接取反。

同理，数组的绑定方式如下，样式代码相同，逻辑代码如下：

<div id="app">
      <div v-bind:class='[activeClass, errorClass]'>测试样式</div>
      <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          activeClass: 'active',
          errorClass: 'error'
        },
        methods: {
          handle: function(){
            this.activeClass = '';
            this.errorClass = '';
          }
        }
      });
    </script>

核心思路：数组使用v-bind:class绑定数组，在方法中控制样式是直接控制activeClass的数值。对象方法和数组方法可以结合起来使用。