vue样式属性Class与Style绑定_Java开源博客系统-Powered by java1234

博客信息

vue样式属性Class与Style绑定

发布时间：『 2019-07-02 22:41』博客类别：Vue.js 阅读(2307) 评论(0)

vue样式属性Class与Style绑定

vue可以动态改变数据，同时也支持动态改变class和style；

我们先看下动态class属性绑定，以及动态修改；

.aClass{

color:red

}

.bClass{

color:green

}

.cClass{

font-size:25px

}

<h2>class样式属性绑定</h2>

<p v-bind:class="a">class样式属性绑定</p>

<p :class="a">class样式属性绑定</p>

<p :class="{aClass:isA,cClass:isC}">多样式对象</p>

<h2>style绑定</h2>

</div>

new Vue({

el:'#app',

data:{

a:'aClass',

isA:true,

isC:false

methods:{

change(){

this.a=(this.a=='aClass'?'bClass':'aClass');

this.isC=true;

}

});

我们再看下绑定style内联样式

<h2>style绑定</h2>

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">style内联样式绑定</div>

data:{

activeColor: 'red',

fontSize: 30

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass{
            color:red
        }
        .bClass{
            color:green
        }
        .cClass{
            font-size:25px
        }
    </style>
</head>
<body>
<div id="app">
    <h2>class样式属性绑定</h2>
    <p v-bind:class="a">class样式属性绑定</p>
    <p :class="a">class样式属性绑定</p>
    <button @click="change">改变样式</button>
    <p :class="{aClass:isA,cClass:isC}">多样式对象</p>
    <h2>style绑定</h2>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">style内联样式绑定</div>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">

    new Vue({
        el:'#app',
        data:{
            a:'aClass',
            isA:true,
            isC:false,
            activeColor: 'red',
            fontSize: 30
        },
        methods:{
            change(){
                this.a=(this.a=='aClass'?'bClass':'aClass');
                this.isC=true;
                this.activeColor='green';
            }
        }
    });


</script>
</body>
</html>

关键字： 无

上一篇：es6 三点运算符可变参数

下一篇：vue事件处理器

关注Java1234微信公众号

博主信息

Java1234_小锋

(知识改变命运，技术改变世界)

按日志类别

按日志日期

友情链接