Vue的样式绑定

目录

1、内联绑定

2、非内联绑定

3、使用计算属性返回样式对象

4、数组语法进行绑定，支持绑定多个，使用运算法、使用对象

---

 

        样式的绑定，使用v-bind:class,v-bind:style ，v-bind:class在<style>标签内事先写好样式，再进行名称绑定，v-bind:style在vue实例中直接编写样式再进行绑定。

1、内联绑定

        内联绑定即将1元素的class属性直接绑定为对象的形式

<style type="text/css">
    .style1 {
        color: green;
    }

    .style2 {
        font-size: 50px;
    }
</style>

<div id="element">
    <div v-bind:class="{ style1 : istrue, style2 : true }">Vue.js内联样式绑定</div>
    <div v-bind:style="{ 'color': 'green','font-size': '50px'}">Vue.js内联样式绑定</div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            istrue: true
        }
    })

</script>

2、非内联绑定

        非内联绑定即将元素的class属性绑定的对象定义在data选项中

<style type="text/css">
    .style1 {
        color: green;
    }

    .style2 {
        font-size: 50px;
    }
</style>

<div id="element">
    <div v-bind:class="classObject1">Vue.js非内联样式绑定</div>
    <div v-bind:style="classObject2">Vue.js非内联样式绑定</div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            classObject1:{
                style1:true,
                style2:true,
            },
            classObject2:{
                'color': 'green',
                'font-size': '50px'
            }
        }
    })

</script>

3、使用计算属性返回样式对象

        可以为元素的class属性绑定一个返回对象的计算属性

        

<style type="text/css">
    .style1 {
        color: green;
    }

    .style2 {
        font-size: 50px;
    }
</style>

<div id="element">
    <div v-bind:class="classObject1">Vue.js计算属性样式绑定</div>
    <div v-bind:style="classObject2">Vue.js计算属性样式绑定</div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            isStyle1: true,
            isStyle2: true
        },
        computed: {
            classObject1: function () {
                return {
                    style1: this.isStyle1,
                    style2: this.isStyle2,
                }
            },
            classObject2: function () {
                return {
                    'color': 'green',
                    'font-size': '50px'
                }
            }
        }
    })

</script>

 

4、数组语法进行绑定，支持绑定多个，使用运算法、使用对象

<style type="text/css">
    .style1 {
        color: green;
    }

    .style2 {
        font-size: 50px;
    }
</style>

<div id="element">
    <div v-bind:class="[ {style1:isStyle1} ,isStyle2 ? style2 : 'style2' ]">Vue.js数组语法进行样式绑定</div>
    <div v-bind:style="[ isStyleObject ? styleObject : styleObject ,{'font-size' : '50px'} ]">Vue.js数组语法进行样式绑定</div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            isStyle1: true,
            isStyle2: true,
            style2:'style2',

            isStyleObject:true,
            styleObject:{
                'color': 'green'
            }
        }
    })

</script>