vus.js动态绑定css样式

vue.js 专栏收录该内容
25 篇文章 0 订阅

首先,要知道vuejs动态绑定需要用到哪个属性,即v-bind:class这个值,下面我们来看看具体代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<title>vue.js 学习</title>
		<link rel="stylesheet" href="styles.css">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
	    <!--app是根容器 -->
        <div id="app">
		    <h1> 动态css class </h1>
			
			<h2> 示例1 </h2>
			<!--<div v-on:click="changeColor= !changeColor" 
			v-bind:class="{changeColor:changeColor}">
			   <span>Henry</span>
			</div>-->
			<h2> 动态css class </h2>
			<button v-on:click="changeColor= !changeColor">change color</button>
			<button v-on:click="changeLength= !changeLength">change Length</button>
			<button v-on:click="changeLengthRight= !changeLengthRight">change Length Right</button>
			<div v-bind:class="compClasses">
			    <span>mischen</span>
			</div>
			
		</div>
		<script src="app.js"></script>
    </body>
</html>
//实例化vue对象
new Vue({
	el:"#app",
	data:{
	   changeColor:false,
	   changeLength:false,
	   changeLengthRight:false
	},
	methods:{
		/*addToA: function(){
			console.log("Add to A");
			return this.a + this.age;
		},
		addToB: function(){
			console.log("Add to B");
			return this.b + this.age;
		}*/
	},
	computed:{
		compClasses: function(){
			return {
				changeColor: this.changeColor,
				changeLength: this.changeLength,
				changeLengthRight: this.changeLengthRight
			}
		}
	}
	
});

/*
*
**
*/
span{
	background: red;
	display: inline-block;
	padding: 10px;
	color: #fff;
	margin: 20px 0;
}

.changeColor span{
	background: green;
}

.changeLength span:after{
	content: "length";
	margin-left: 20px;
}

.changeLengthRight span:before{
	content: "length";
	margin-right: 20px;
}

我设计的初期是先设置一个css的样式,让它默认填充红色,当我点击按钮去改变它的时候,就变成录入,增加长度也是如此,

所以在绑定事件的时候使用v-bind:class这个去获取每个属性值。当点击的时候改变它的颜色事件,页面效果如下所示:

当点击上图中change color这个按钮的时候它就自动变成绿色了,页面效果如下所示:

这个就是vue.js绑定样式的基础示例,在实际开发中这个功能应用得非常多,因为经常需要调样式以及去改变属性的颜色值

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值