vue之class与style绑定（三）

内容简介：如果数据属性发生改变，我们可以把一个数组传给

如果数据属性发生改变， class 列表将相应地更新

<div id="app">
    <div v-bind:class="{active:isActive}"></div>
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
        msg:"对象语法",
        isActive:true
    }
});
</script>

v-bind:class 指令也可以与普通的 class 属性共存

.active{
    width: 100px;
    height: 100px;
    background: red;
}
        
<div id="app">
    <div class = "box" v-bind:class="{active:isActive}"></div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"对象语法",
            isActive:true
        }
    });
</script>

可以直接绑定数据里的一个对象

.active1{
    width: 100px;
    height: 100px;
    margin-top: 10px;
    border: 1px solid #ccc ;
}

<div id="app">
    <div v-bind:class="classObj"></div>
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
        classObj:{
            active:true,
            aaa:false
        }
    }
});
</script>

可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式

<style>
.aaa{
    background: green;
    width: 100px;
    height: 100px;
    margin-top: 10px;
}

</style>
<div id="app">
    <div v-bind:class="Obj"></div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"对象语法",
            isActive:true
        },
        computed:{
            Obj:function(){
                return{
                    aaa:this.isActive
                } 
            }
        }
    });
</script>

1.2 数组语法

我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表

<style>
    .active{
        width: 100px;
        height: 100px;
        background: red;
    }
    .active1{
        color: yellow;
    }
    .aaa{
       border: 5px solid #ccc;
    }
</style>

<div id="app">
    <div class = "box" v-bind:class="[isActive,isActive1,isActive2]">{{msg}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"对象语法",
            isActive:"active",
            isActive1:"active1",
            isActive2:"aaa"
        }
    });
</script>

可以用三元表达式

<style>
    .active{
        width: 100px;
        height: 100px;
        background: red;
    }
    .active1{
        color: yellow;
    }
    .aaa{
       border: 5px solid #ccc;
    }
</style>

<div id="app">
    <div class = "box" v-bind:class="[isActive,isActive1,isActive5 ? isActive2 : '']">{{msg}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"对象语法",
            isActive5:false,
            isActive:"active",
            isActive1:"active1",
            isActive2:"aaa"
        }
    });
</script>

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

<style>
    .active{
        width: 100px;
        height: 100px;
        background: red;
    }
    .active1{
        color: yellow;
    }
    .aaa{
       border: 5px solid #ccc;
    }
</style>

<div id="app">
    <div class = "box" v-bind:class="[isActive,{active1:isActive5},isActive5 ? isActive2 : '']">{{msg}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"对象语法",
            isActive5:true,
            isActive:"active",
            isActive1:"active1",
            isActive2:"aaa"
        }
    });
</script>

1.3 在组件上

在一个自定义组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖

<style>
    .active1{
        width: 100px;
        background: red;
    }
    .aaa{
        border: 5px solid #ccc;
    }
    .bbb{
        height: 100px;
    }
</style>

<div id="app">
    <tanchu v-bind:class="classObj"></tanchu>
</div>
<script>

    Vue.component('tanchu', {
        template: `<div class="bbb">
                <input type="button" value="弹出"/>
            </div>`
    })
    
    var app = new Vue({
        el:"#app",
        data:{
            classObj:{
                active1:true,
                aaa:true
            }
        }
    })
</script>

二、绑定内联样式

2.1 对象语法

<div id="app">
    <div v-bind:style="{background:a,border:b,width:c}">内联样式</div>
    <div v-bind:style="classObj">内联样式</div>
</div>
<script>

    var app = new Vue({
        el:"#app",
        data:{
            a:"red",
            b:"5px solid #ccc",
            c:"100px"
            classObj:{
                background:"red",
                border:"5px solid #ccc",
                width:"100px",
                marginTop:"10px"
            }
        }
    })
</script>

2.2 数组语法

<div id="app">
    <!-- 数组语法 -->
    <div v-bind:style="[classObj,classObj1]">内联样式</div>
</div>
<script>

    var app = new Vue({
        el:"#app",
        data:{
            classObj:{
                background:"red",
                border:"5px solid #ccc",
                width:"100px"
            },
            classObj1:{
                height:"100px"
            }
        }
    })
</script>

以上所述就是小编给大家介绍的《vue之class与style绑定（三）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Haskell函数式编程基础

Simon Thompson / 科学出版社 / 2013-7-1 / 129.00

《Haskell函数式编程基础（第3版）》是一本非常优秀的Haskell函数式程序设计的入门书，各章依次介绍函数式程序设计的基本概念、编译器和解释器、函数的各种定义方式、简单程序的构造、多态和高阶函数、诸如数组和列表的结构化数据、列表上的原始递归和推理、输入输出的控制处理、类型分类与检测方法、代数数据类型、抽象数据类型、惰性计算等内容。书中包含大量的实例和习题，注重程序测试、程序证明和问题求解，易......一起来看看《Haskell函数式编程基础》这本书的介绍吧!

码农工具