Vue.js 学习笔记 七 控制样式

Vue.js可以灵活的控制样式

我们首先随便写2个样式

<style>
        .divCss {
            background-color: green;
            width:400px;
            height:400px;
        }
        .fontCss {
            font-size: large;
            color:red;
        }
    </style>

直接在元素中class="divCss"这样，是老办法了，在Vue中，可以更加灵活

<div id="appDiv" v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 
        我是Div中的文字
    </div>

    <script>
        var v = new Vue({
            el: '#appDiv',
            data: {
                divFlag: true,
                fontFlag: false
            },
            methods: {

            }
        })

    </script>

用v-bind绑定样式属性，通过类的方式，可以控制某个样式是否生效，例如这里出现的就是绿底黑字，如果把Vue实例中的data.fonFlag改成true，那就是

绿地红字了，这样的好处是，可以方便灵活的控制样式。

 

当然也可以将元素上的类当作data中的一个属性

 <div id="appDiv" >
        <div v-bind:class="{divCss:divFlag,fontCss:fontFlag}">
            我是Div1中的文字
        </div>
        <div v-bind:class="div2Css">
            我是Div2中的文字
        </div>
    </div>
    <script>
        var v = new Vue({
            el: '#appDiv',
            data: {
                divFlag: true,
                fontFlag: true,
                div2Css: { divCss: true, fontCss: false }
            },
            methods: {
            }
        })
    </script>

当然如果样式本身是固定不变，也可以用最原始的方法，Vue也提供用数组方式绑定

 <div id="appDiv">
        <div v-bind:class="{divCss:divFlag,fontCss:fontFlag}">
            我是Div1中的文字
        </div>
        <div v-bind:class="div2Css">
            我是Div2中的文字
        </div>
        <!--这里的fontCss,divCss不是样式名，是Vue实例中的data的属性名-->
        <div v-bind:class="[fontCss,divCss]">
            我是Div3中的文字
        </div>
    </div>
    <script>
        var v = new Vue({
            el: '#appDiv',
            data: {
                divFlag: true,
                fontFlag: true,
                div2Css: { divCss: true, fontCss: false },
                fontCss: 'fontCss',
                divCss: 'divCss'
            },
            methods: {
            }
        })
    </script>

 

p.s:如果不像用class绑定，用style也可以，v-bind:style=" " 就行，方法跟绑定class一样，这里就不写了。

 

上一篇

Vue.js 学习笔记 六 v-model 双向绑定数据

 

转载于:https://www.cnblogs.com/luyShare/p/11540556.html