其他分享
首页 > 其他分享> > vue学习-05-class与style绑定(未完)

vue学习-05-class与style绑定(未完)

作者:互联网

绑定class

v-bind:class不但可以设置class属性,还可以和元素本身的class共存
<div id="app" class="static" v-bind:class="{active:isActive,bold:isBold}">
    {{message}}
</div>
<script>
    const dataObj = {
        message: 'hello,vue',
        isActive: true,
        isBold: true,
    };
    const app = new Vue({
            el: '#app',
            data: dataObj,
            computed: {},
            method: {}
        })
    ;
</script>
上面的方案给模板插值带来一定的压力,我们可以直接定义在视图模型端
<div id="app" class="static" v-bind:class="isClass">
    {{message}}
</div>
const dataObj = {
        message: 'hello,vue',
        isClass:{
            active:true,
            bold:true,
        }
    };
模板插值使用数组格式来定义
<div id="app" class="static" v-bind:class="[active,bold]">
    {{message}}
</div>
const dataObj = {
        message: 'hello,vue',
        active:'active',
        bold:'bold',
    };
有复杂的业务计算时,可以交给计算属性处理
<div id="app" class="static" v-bind:class="classObject">
    {{message}}
</div>
const dataObj = {
    message: 'hello,vue',
};
const app = new Vue({
    el: '#app',
    data: dataObj,
    computed: {
        classObject() {
            return {
                active: true,
                bold: true,
            }
        }
    },
});

style绑定

方案一
<div id="app" style="font-size: 20px;color: red;" v-bind:style="{color:activeColor}">
    {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //数据对象
    const dataObj = {
        message: 'hello,vue',
        activeColor:'blue'
    };

    const app = new Vue({
        el: '#app',
        data: dataObj,
        computed: {
        },
        method: {}
    });
</script>
方案二

标签:style,vue,const,05,dataObj,app,message,true
来源: https://www.cnblogs.com/keacua/p/15243708.html