Vue的样式绑定

最新推荐文章于 2025-02-17 15:12:51 发布

原创最新推荐文章于 2025-02-17 15:12:51 发布 · 83 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
	<title>Vue的样式绑定</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		.action{
			color: red;
		}
		.action-one{
			color: yellow;
		}
	</style>
</head>
<body>
	<div id="app">
		<div 
		:style="[styleObj,{fontSize:'6px'}]" @click="handDivClick"
		>
			hello word!!!
		</div>
		<!-- <div 
		:style="styleObj" @click="handDivClick"
		>
			hello word!!!
		</div> -->
		<!-- <div @click="handDivClick"
		:class="[action,actionOne]" 
		>
			hello word!!!
		</div> -->
	</div>
</body>
 <script type="text/javascript">
 	//vue点击颜色变化一般就是js，那么我们就是做一个js绑定对象；{}
 	//:class="{action:isaction}" 属性action,
 	//1.一种方法就是class对象绑定；
 	//2.第二种方法就是class绑定一个数组；里面就是变量值；
 	//3.第三种方法就是通过style绑定数组的形式；和变量的形式；
 	var app=new Vue({
 		el:"#app",
 		data:{
 			isaction:false,
 			action:"",
 			actionOne:"action-one",
 			styleObj:{
 				color:"red"
 			}

 		},
 		methods:{
 			handDivClick:function(){
 				/*this.isaction=!this.isaction;
 				console.log(123);*/
 				/*this.action="action";*/
 				//这么判断呢？
 				/*if (this.action==="") {
 					this.action="action";
 				} else {
 					this.action="";
 				}*/
 				//用一个三元表达；
 				this.styleObj.color=this.styleObj.color==="red"?"yellow":"red";
 				
 			}
 		}
 		
 	})
 	
 </script>
</html>