2020-09-29 vue学习笔记——class与style绑定(对象语法、数组语法、用在组件上)

class与style绑定

1、对象语法
我们可以传给 v-bind:class 一个对象,以动态地切换 class:

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示class是否存在取决于isActive是否为true,即数据属性是否为true。

你可以在对象中传入更多字段来动态切换多个 classv-bind:class 指令也可以与普通的class共存


.active{
        width:100px;
        height:100px;
        border:1px solid #ccc;
    }
 .bg{
        background-color:azure;
    }
  .text-danger{
         color:red;
    }
<div id="app">
    <div v-bind:class="classObj"}>1</div>
    //这里的classObj包含了两个不同的class和一个普通的class
</div>

var vm = new Vue({
    el: '#app',
    data: {
       msg:"",
       isActive :true,
       isBg:true,
    classObj:{
    //这里将style里的多个数据绑定在一个对象中
       active:true,
       bg:true,
       'text-danger':true
    },

执行结果:
在这里插入图片描述
直接将多个数据绑定在一个对象里,直接调用即可。这样的写法拥有更高的可读性。
同样,我们也可以绑定返回对象的计算属性。

var vm = new Vue({
    el: '#app',
    data: {
       msg:"",
       isActive :true,
       isBg:true
    },
    computed:{
        classObj:function(){
        //这里把返回对象绑定在了计算属性中,也可以实现同样的效果。
            return {
                active:this.isActive,
                bg:this.isBg,
                'text-danger':true
            };
        }
    },
  })

2、数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:

<style>
    .active{
        width:100px;
        height:100px;
        border:1px solid #ccc;
    }
    .text-danger{
         color:red;
    }
    .bg{
        background-color:azure;
    }
</style>
<div id="app">
    <div v-bind:class="[cls1,cls2,cls3]">1</div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
       msg:"",
	   cls1:"active",
	   cls2:"text-danger",
	   cls3:"bg"
	   }
});

如果你也想根据条件切换列表中的 class,可以用三元表达式:

<div id="app">
    <div v-bind:class="[cls1,isActive?cls2:'',cls3]">1</div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
       msg:"",
	   cls1:"active",
	   cls2:"text-danger",
	   cls3:"bg"
	   isActive:true
	   }
});

不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:

<div id="app">
    <div v-bind:class="[cls1,{'text-danger':isActive},cls3]">1</div>
</div>

但是这样还是显得有些冗长,[cls1,{'text-danger':isActive},cls3]
可以将这一部分设置一个对象,放入到属性中:

<div id="app">
    <div v-bind:class="classObjArr">1</div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        msg:"",
		isActive:true,
        isA:true,
	    classObjArr:["active",{'text-danger':true},"bg"]
	   }
});

3、用在组件上

class除了绑定在html上,还可以绑定在组件上。当在一个自定义组件上使用 class property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖

<div id="app">
    <alertmsg  :class="classObj"></alertmsg>
    //这里的class是加给了template中的根元素。
</div>
Vue.component("alertmsg",{
    template:`
            <div class="blue">
                <input type="button" value="弹出" v-on:click="tanchu"/>
            </div>
        `,
        //1、这里使用`来让template分行,提高可读性
        //2、<div>就是这里的根元素,<input>是这里的子元素
    methods:{
        tanchu:function(){
            alert("123");
        }
    }
});
 var vm = new Vue({
    el: '#app',
    data:{
        classObj:{
            red:true,
            active:true
        }
    }

});
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页