初学必懂—vue绑定class的几种方式+绑定内联样式总结

本篇博客主要学习内容🌼

先来看看以下这些语句都熟不熟悉吧！这些节选于后续的博客内容🌻🌻🌻

<div :class = "{'active': isActive}">active生效</div>

<div class="static" :class = "{'active': isActive, 'error': isError}">active生效</div>

<div :class = "classes()">active生效</div>

<div :class="[activeClass, errorClass]"></div>

<div :class="[isActive ? activeClass:'', errorClass]">

<div :class="[{'active':isActive}, errorClass]"></div>

<button :class="classes"></button>

<button :class="classes" ></button>
<div :style="{'color': color, 'fontSize': fontSize+'px'}">我是内联绑定的元素噢</div>

<div :style="styles">我是data里绑定的style</div>

对象语法🌺

最常见的就是给v-bind:class设置一个对象，可以动态切换class：

<div id="app">
    <div :class = "{'active': isActive}">active生效</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
        isActive:true
        }
    })
</script>

这个比较简单：

上面的active依赖于isActive，只有当它为true时才有用，才能显示，我们也可以传入多个属性，来动态切换class
:class可以和class共存

<div id="app">
     <div class="static" :class = "{'active': isActive, 'error': isError}">active生效</div>
 </div>

 <script>
     var app = new Vue({
         el: '#app',
         data: {
            isActive:true,
            isError:false
         }
     })
 </script>

将isError改为true：

当判断条件多于两个时，我们常用计算属性来解决

<div id="app">
    <div :class = "classes">active生效</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            isActive:true,
            isError:null
        },
        computed:{
            classes: function(){
                return{
                    active: this.isActive && !this.isError,
                    'text-fail': this.error && this.error.type == 'fail'
                }
            }
        }
    })
</script>

当isError:null时：

为true时：

为false：

除了计算属性，还可以绑定一个对象或者使用methods
使用methods和计算属性其实差不多：

<div id="app">
   <div :class = "classes()">active生效</div>
</div>

<script>
   var app = new Vue({
       el: '#app',
       data:{
           isActive:true,
           isError:true
       },
       methods: {
           classes : function (){
               return {
                   active: this.isActive && !this.isError,
                   'text-fail': this.error && this.error.type == 'fail'
               }
           }
       },
      
   })
</script>

数组语法🍍

和上面一样，当要应用多个class属性的时候，可以使用数组语法，给:class绑定一个数组，应用class列表

<div id="app">
   <div :class="[activeClass, errorClass]"></div>
</div>

<script>
   var app = new Vue({
       el:'#app',
       data() {
           return {
               activeClass: 'active',
               errorClass: 'error'
           }
       },
   })
</script>

🧐🧐🧐
来玩玩三元运算

<div id="app">
    <div :class="[isActive ? activeClass:'', errorClass]"></div>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data() {
            return {
                isActive:true,
                activeClass: 'active',
                errorClass: 'error'
            }
        },
    })
</script>

样式error是始终都会被应用，当数据isActive为真时，样式active才会被应用：

为false：

甚至，我们可以混用：

<div id="app">
    <div :class="[{'active':isActive}, errorClass]"></div>
</div>
<script>
     var app = new Vue({
       el:'#app',
       data() {
           return {
               isActive:true,
               errorClass: 'error'
           }
       },
   })
</script>

同样的，我们使用data、computed、methods这些都可以玩
下面来玩computed：

<div id="app">
  <button :class="classes"></button>
</div>
<script>
  var app = new Vue({
      el:'#app',
      data:{
          size:'large',
          disabled:true
      },
      computed: {
          classes:function(){
              return [
                  'btn',
                  {
                      ['btn-'+ this.size]: this.size !== '',
                      ['btn-disabled']: this.disabled            
                  }
                      
              ]
          }
      },
  })
</script>

绑定内联样式🍉

绑定内联样式style也是差不多的，举个小例子：
在上面的例子中加入一个文本

<div id="app">
   <button :class="classes" ></button>
   <div :style="{'color': color, 'fontSize': fontSize+'px'}">我是内联绑定的元素噢</div>
</div>
<script>
   var app = new Vue({
       el:'#app',
       data:{
           size: 'large',
           disabled: true,
           color: 'red',
           fontSize: 18
       },
       computed: {
           classes:function(){
               return [
                   'btn',
                   {
                       ['btn-'+ this.size]: this.size !== '',
                       ['btn-disabled']: this.disabled            
                   }
                       
               ]
           }
       },
   })
</script>

注意：CSS属性要用驼峰命名法或者短横分隔符，渲染后的结果就在上面啦，一般来说吧，我们会直接写在data或者computed里，再来一个小例子：

<div id="app">
    <div :style="styles">我是data里绑定的style</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            styles: {
                color: 'red',
                fontSize: 18 + 'px'
            }
        }
    })
</script>