1-8 style样式

Class与Style绑定

绑定HTML Class

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

<template>
    <div>
        <p v-bind:class="styleObj">Vue.js</p>
    </div>
</template>
<script>
export default {
    name:"Style",
    data(){
        return{
           styleObj:{
               active:true,
               'demo':false
           }
        }
    }
}
</script>
<style>
    .active{
        color: red;
    }
</style>

当active为true和'demo'为false的时候

效果图：

当active为true和'demo'为true的时候

效果图：

当active或者'demo'变化时，class列表将相应地更新。

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

<template>
    <div>
        <p v-bind:class="styleObj">Vue.js</p>
    </div>
</template>
<script>
export default {
    name: "Style",
    data() {
        return {
            isActive: true,
            isDemo: true
        }
    },
    computed: {
        styleObj() {
            return {
                "active": this.isActive,
                "demo": this.isDemo
            }
        }
    }
}
</script>
<style>
.active {
    color: red;
}
</style>

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

<template>
    <div>
        <p v-bind:class="[demo1,demo2]"></p>
    </div>
</template>
<script>
export default {
    name: "Style",
    data() {
        return {
            demo1:"demo11",
            demo2:"demo22"
        }
    }
}
</script>
<style>
.active {
    color: red;
}
</style>

效果图：

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<template>
    <div>
        <p v-bind:style="stob">Vue.js</p>
    </div>
</template>
<script> 
export default {
    name: "Style",
    data() {
        return {
            stob:{
                color:"red",
                fontSize:"40px"
            }
        }
    },
    
}
</script>
<style>

</style>

效果图：

猜你喜欢