Vue-class与s'tyle绑定

一、 用对象的方法绑定class

1. 说明

   • 设置一个对象，可以动态地切换class
   • 对象中也可以传入多个属性，来动态切换class,另外，:class可以与普通class共存
   • class的表达式过长或者逻辑复杂时候，还可以绑定一个计算属性，这是一种友好和常见的用法，一般当条件多于两个时，都可以使用data或者computed

2. 基础使用

   <style type="text/css">
       .btn {
           padding: 6px 12px;
           font-size: 14px;
           font-weight: normal;
       }
   </style>
   <div id="app">
       <button :class="btnClass">绑定对象</button>
   </div>
   <script>
       /**
        * 静态绑定
        */
       new Vue({
           el: "#app",
           data: {
               // 当btnClass改变时将更新class
               btnClass:'btn'
           }
       })
   </script>
   <!--渲染之后 -->
   <button class="btn">绑定按钮</button>
   

3. 绑定对象

   <style>
       .btn {
           padding: 6px 12px;
           font-size: 14px;
           font-weight: normal;
       }
       .btn-default {
           color: #333;
           background-color: #fff;
           border-color: #ccc;
       }
   </style>
   <div id="app">
       <!-- 这里的active单引号可加不加可不加 多个对象用,逗号隔开 -->
        <!-- 注意使用-命名一定要加下 单引号 '' -->
       <p class="btn" :class="{ 'active':isActive,'btn-default':isDefault }" v-text="shop.title"></p>
   </div>
   <div id="app">
       <button :class="{btn:isActive,'btn-default':isDefault}">绑定按钮</button>
   </div>
   <script>
       new Vue({
           el: "#app",
           data: {
               isActive: false
               isDefault: true,
           }
       })
   </script>
   <!-- 渲染之后 -->
   <button class="btn btn-default">绑定对象</button>
   

4. 绑定多个对象(data里面中声明)

   :class="btnClass"
   <script>
       new Vue({
           el: "#app",
           data: {
              btnClass:{
                  btn:isActive,'btn-default':isDefault
              }
           }
       })
   </script>
   

5. 绑定多个对象(computed里面中声明)

    <style type="text/css">
           .btn {
               padding: 6px 12px;
               font-size: 14px;
               font-weight: normal;
           }
           .btn-default {
               color: #333;
               background-color: #fff;
               border-color: #ccc;
           }
           .active {
               background-image: none;
               outline: 0;
               -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
               box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
               color: #fff;
               background-color: #5cb85c;
               border-color: #4cae4c;
           }
   <div id="app">
       <button class="btn" :class="btnClass" @mouseenter="isEnter" @mouseleave="isLeave">绑定多个属性</button>
   </div>
   <script>
       const vm = new Vue({
           el: "#app",
           data: {
               isActive: false,
               isDefault: true,
           },
           computed: {
               btnClass: function () {
                   return {
                       'btn-default': this.isDefault,
                       'active': this.isActive,
                   }
               }
           },
           methods: {
               isEnter: function () {
                   this.isActive = true;
               },
               isLeave: function () {
                   this.isActive = false;
               }
           }
       })
   

二、用数组的方法绑定class

1. 说明
   当需要应用多个class，可以使用数组语法，给:class 绑定一个数组，应用一个class列表

2. 单纯数组

   <style type="text/css">
       .btn {
           padding: 6px 12px;
           font-size: 14px;
           font-weight: normal;
       }
       .btn-default {
           color: #333;
           background-color: #fff;
           border-color: #ccc;
       }
       .active {
           background-image: none;
           outline: 0;
           -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
           box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
           color: #fff;
           background-color: #5cb85c;
           border-color: #4cae4c;
       }
   </style>
   <div id="app">
       <button class="btn" :class="['btn-default','active']">绑定多个属性</button>
   </div>
   <script>
       const vm = new Vue({
           el: "#app",
       })
   </script>  
   <!--渲染之后 -->
   <button class="btn btn-default active">绑定多个属性</button>
   

3. 数组+对象+三则运算

       <style type="text/css">
           .btn {
               padding: 6px 12px;
               font-size: 14px;
               font-weight: normal;
           }
           .btn-default {
               color: #333;
               background-color: #fff;
               border-color: #ccc;
           }
           .active {
               background-image: none;
               outline: 0;
               -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
               box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
               color: #fff;
               background-color: #5cb85c;
               border-color: #4cae4c;
           }
           .btn-danger {
               color: #fff;
               background-color: #d9534f;
               border-color: #d43f3a;
           }
       </style>
   </head>
   <body>
   <div id="app">
       <!--    注意 class最好加上单引号，否则有可能不能正确渲染-->
       <!--    <button class="btn" :class="['btn-default','active']">绑定多个属性</button>-->
       <!--    不能使用data里的对象,否则不能正确渲染-->
       <button class="btn" :class="[{active: isActive},isDanger ? 'btn-danger':'']">绑定数组</button>
   </div>
   <script>
       const vm = new Vue({
           el: "#app",
           data: {
               btnDefault: 'btn-default',
               isActive: true,
               isDanger: true,
           },
       })
   </script>
   <!--渲染后 -->
   <button class="btn active btn-danger">绑定数组</button>
   

三、用对象的方式实现style绑定

1. 说明
   使用v-bind:style="" 或者:style语法，style与class类似，可以给元素绑定内联样式,也有对象语法和数组语法,看起来很直接在元素上写CSS

2. 基本使用

   <div id="app">
       <a href="#" :style="{'color':color,'font-size':fontSize + 'px','text-decoration':textDecoration}">绑定内联样式</a>
   </div>
   <script>
       /**
        * 静态绑定
        */
       new Vue({
           el: "#app",
           data: {
               color: 'red',
               fontSize: 18,
               textDecoration: 'none'
           }
       })
   </script>
   

3. 绑定对象动态修改

   <div id="app">
       <a href="#" :style="aStyle"  @mouseover="aMouseOver" @mouseout="aMouseOut">直接使用对象</a>
   </div>
   <script>
       /**
        * 静态绑定
        */
       new Vue({
           el: "#app",
           data: {
               color: 'red',
               fontSize: 18,
               textDecoration: 'none',
               //    或者
               aStyle: {
                   color: 'black',
                   fontSize: 18 + 'px',
                   textDecoration: 'none',
               },
           },
           methods: {
               aMouseOver: function () {
                   this.aStyle.color = 'red'
               },
               aMouseOut: function () {
                   this.aStyle.color = 'black'
               }
           }
       })
   

4. 绑定数组

   <div id="app">
   <!-- 在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面 -->
       <a href="#" :style="[aBase,aFont]">绑定数组</a>
   </div>
   <script>
       /**
        * 静态绑定
        */
       new Vue({
           el: "#app",
           data: {
               aBase: {
                   color: 'red',
               },
               aFont: {
                   fontSize: 16 + 'px',
                   textDecoration: 'none',
               },
           },
       })