Vue入门详解之绑定class和style样式

绑定class

绑定class两种方式第一使用对象方式,第二使用数组方式进行绑定

对象方式

    <style>
        *{
            padding:0;
            margin: 0;
        }
        .actived{
            color:hotpink;
        }
    </style>
</head>
<body>
<div id="app">
    <h1  :class="{actived:isActive}" @click="getCor">{{msg}}</h1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isActive:false,
            msg:"十月梦想"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })
</script>

            如果isActive为真这绑定这个activedclass,我们绑定了一个click事件,点击后改变这个isClick取值,我们在style中定义了这个.actived的颜色可以使用不同class显示不同颜色!除了对象方式还有其他方式绑定吗?当然有!

数组方式

除了上述的对象方式绑定,还有一种就是数字方式绑定,我们只看关键的vue代码

var app=new Vue({
    el:"#app",
    data:{
        cls1:"btn",
        cls2:"btn-lg",
        cls3:"col-md",
        actived:"actived",
        isActive:false,
        msg:"十月梦想"
    },
    mounted:function(){
        console.log(this)
    },
    methods:{
        getCor:function (){
            this.isActive=!this.isActive
        }
    }

})

        对代码简单解析,和对象方式不太一样,这个数组绑定可以传入多个,这个属性来自vue实例中的data,也可以传入一个三木运算符!

直接绑定style样式

        上面通过两种方式绑定了class,间接改变了css样式!我们能否直接去改变这个style样式呢?答案当然是可行的!

其实绑定style样式,也是可以通过数组和对象两种方式绑定的!

对象方式

<div id="app">
    <h2 :style="{color:cor,fz:mfz}">{{msg2}}</h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            cls1:"btn",
            cls2:"btn-lg",
            cls3:"col-md",
            cor:"green",
            mfz:"22px",
            msg2:"十月OctDream"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })

:style直接绑定,对象内的属性来自data,data对象的属性是css属性值!还有一种直接通过数组绑定样式!

数组方式

    <h2 :style="[css1,css2]">{{msg2}}</h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            css1:{
              fontSize:"58px",
            },
            css2:{
                color:"purple"
            },
            cls1:"btn",
            cls2:"btn-lg",
            cls3:"col-md",
            cor:"green",
            mfz:"22px",
            actived:"actived",
            isActive:false,
            msg:"十月梦想",
            msg2:"十月OctDream"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })
</script>

        可以直接在一个标签绑定多个属性对象,这个属性定义在data中,每个对象写CSS样式,但是比如font-size形式改为驼峰法fontSize:"20px",等,如果是字符串需要定义在引号中!

这样直接就绑定了CSS样式无需绑定class

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《Vue入门详解之绑定class和style样式
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!