【轻松学vue】vue.js基础入门教程（九）样式绑定

样式绑定

操作元素的class列表和style内嵌样式的常见的需求。因为class和style都是html的属性，所以我们可以使用v-bind来动态改变样式。
1） 绑定html的class
可以为v-bind:class设置一个对象，动态切换class

<style>
    .active{
        color: red;
    }
</style>
<div id="app">
    <div v-bind:class="{active:isActive}">易动学院</div>
    <button v-on:click="changeStyle">切换样式</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:true
        },
        methods:{
            changeStyle:function () {
                this.isActive=!this.isActive;
            }
        }
    })
</script>

对象中可以传入多个值，来控制不同的样式

<style>
    .active{
        color: red;
    }
    .size{
        font-size: 30px;
    }
</style>
<div id="app">
    <div v-bind:class="{active:isActive,'size':isSize}">易动学院</div>
    <button v-on:click="changeStyle">切换样式</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:true,
            isSize:false
        },
        methods:{
            changeStyle:function () {
                this.isActive=!this.isActive;
                this.isSize=!this.isSize;
            }
        }
    })
</script>

可以和普通的class共存

<div class=”static” v-bind:class="{active:isActive,'size':isSize}">易动学院</div>

绑定的对象不一定定义在模板里，可以定义在data里

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

v-bind:class可以设置一个数组

<style>
    .active{
        color: red;
    }
    .size{
        font-size: 30px;
    }
</style>
<div v-bind:class="['active','size']">易动学院</div>

如果想要根据条件进行class列表的切换，可以使用三元运算符

<div v-bind:class="[isActive?'active':'','size']">易动学院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:false
        }
    })
</script>

2） 绑定内联样式
对象语法

<div v-bind:style="{color:textColor,fontSize:fontSize+'px'}">易动学院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            textColor:"red",
            fontSize:30
        }
    })
</script>

可以放置一个样式对象

<div v-bind:style="styleObject">易动学院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            styleObject:{
                color:"red",
                fontSize:"30px"
            }
        }
    })
</script>

数组语法
使用数组语法，绑定多个样式对象

<div v-bind:style="[textStyle,backgroundStyle]">易动学院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            textStyle:{
                color:"red",
                fontSize:"30px",
                fontWeight:"bold"
            },
            backgroundStyle:{
                background:"yellow"
            }
        }
    })
</script>

QQ：732005030
扫码加微信