vus.js动态绑定css样式

最新推荐文章于 2024-08-19 08:00:00 发布

mischen520

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量473

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/miachen520/article/details/115590611

版权

vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

首先，要知道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这个去获取每个属性值。当点击的时候改变它的颜色事件，页面效果如下所示：