mpvue中绑定id 或class实现组件（标签）样式的改变

最新推荐文章于 2020-12-19 13:03:40 发布

ou得之

最新推荐文章于 2020-12-19 13:03:40 发布

阅读量3.3k

点赞数

分类专栏： vue css 文章标签： mpvue样式绑定 css

本文链接：https://blog.csdn.net/qq_42190134/article/details/88294521

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

使用官方的样式绑定比较繁琐，它的css的键通常和<style>中的键的写法不一样导致无法再界面上呈现出来，还以为官方的样式绑定不能使用。

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>

例如上面这个代码，在css中fontSize需要加短横线，它与css不同，而且它的单位还需要像字符串一样通过“+”连接，如果在标签的样式需要大变的时候，样式调整很多的情况下，这样写很麻烦。这样的情况导致熟悉css的同学有些不习惯。

然而我们可以在使用样式可枚举的情况下使用，绑定id或class来动态改变标签的样式。

<!--template界面模板部分-->
<div :class="CLASS" @click="changeClass">样式改变</div><!--通过绑定变量属性，在点击事件时，可改变样式-->

script脚本部分
data（）{
    return{
        CLASS:class0,
    }
}
methods:{
    changeClass:function(){
        if(this.CLASS=='class0'){
            this.CLASS='class1';
        }else{
            this.CLASS='class0'; 
        }    
    }
}

/*style样式部分*/
.class0{
		font-size:80%;
		color:#595A5E;
		width:20%;
		text-align: center;
	}
.class1{
		margin:0 3% 0 3%;
		color:#e67e22;
		font-size: 100%;
		font-weight: 600;
		height:83%;
		width:20%;
		text-align: center;
		padding:1% 0 0 0;
		border-bottom: 2px solid #e67e22;

	}