vue.js实战学习——v-bind 及class与 style绑定

Posted 2020-10-18

注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

 

DOM元素经常会动态的绑定一些class类名或style样式。

1.了解v-bind指令

它的主要用法是动态更新HTML元素上的属性。

在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，他们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑比较复杂时，使用字符串拼接较难阅读和维护，所以Vue.js增强了对class和style的绑定。

2.绑定class的几种方式

2-1.对象语法

给v-bind:class设置一个对象，可以动态的切换class

<div class="app1">
    <div :class="{‘active‘:isActive}">我真的是黑色的！</div>
</div>


var app1=new Vue({
    el:‘.app1‘,
    data:{
        isActive:true
    }
});

上面的实例中，类名active依赖于数据isActive，当其为true时，div会拥有类名isActive，为false时则没有。

对象中也可以传入多个属性，来动态切换class。另外，:class 可以和普通的class共存

<div class="app2">
    <div class="static" :class="classes">我本来是黑色的……</div>
</div>

var app2=new Vue({
    el:‘.app2‘,
    data:{
        isActive:true,
        error:null
    },
    computed:{
        classes:function(){
            return {
                active:this.isActive && !this.error,
                ‘text-fail‘:this.error && this.error.type===‘fail‘
            }
        }
    }
});

当:class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一把的那个条件多余两个时，都可以使用data或computed，上面的例子就是用使用的计算属性。

2-2.数组语法

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

<div class="app3">
    <div :class="[isActive ? activeCls:‘ ‘,errorCls]">三元表达式</div>
</div>

var app3=new Vue({
    el:‘.app3‘,
    data:{
        isActive:true,
        activeCls:‘active‘,
        errorCls:‘error‘
    }
});

也可以使用三元表达式来根据条件切换class，如上。

样式error会始终应用，当数据isActive为真时，样式activeCls才会被应用。class有多个条件时，这样写会比较烦琐，可以在数组语法中使用对象语法。

<div class="app4">
    <div :class="[{‘active‘:isActive},errorCls,classes]">我看看</div>
</div>

var app4=new Vue({
    el:‘.app4‘,
    data:{
        isActive:true,
        errorCls:‘error‘,
        size:‘large‘,
        disabled:true
    },
    computed:{
        classes:function(){
            return [
                ‘btn‘,
                {
                    [‘btn-‘+this.size]:this.size!==‘‘,
                    [‘btn-disabled‘]:this.disabled
                }
            ]
        }
    }
});         

当然，与对象语法一样，也可以使用data、computed和methods三种方法，如上。

2-3.在组件上使用

组件后面会讲，这里就不介绍了，跳过。

3.绑定内联样式

使用v-bind:style（即  :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接现在元素上写CSS

<div class="app5">
    <div :style="{‘color‘:color,‘fontSize‘:fontSize+‘px‘}">文本</div>
</div>

var app5=new Vue({
    el:‘.app5‘,
    data:{
        color:‘red‘,
        fontSize:14
    }
});

CSS属性名称使用驼峰命名或短横分格。

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里

<div class="app6">
    <div :style="styles">文本</div>
</div>

var app6=new Vue({
    el:‘.app6‘,
    data:{
        styles:{
            color:‘red‘,
            fontSize:14+‘px‘
        }        
    }
})

 

在实际业务中， :style 的数组语法并不常用，因为往往可以写在一个对象里面；而较常用的应当是计算属性。

另外，使用 :style  时，Vue.js会自动给特殊的CSS属性名称增加前缀，比如transform。

 

 

 

最后给出今天要用到的所有css

<style type="text/css">
    .active{
        color:blueviolet;
        border: 2px solid #00f;
    }
    .error{
        color:red;
    }
    .static{
        background: #0f0;
    }
    .btn{
        outline: dashed;
    }
    .btn-large{
        background:#ddd ;
    }
    .btn-disabled{
        text-decoration:underline ;
    }
</style>

 

注：此内容摘抄自：梁灏的《Vue.js实战》