提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js v-bind动态绑定class对象语法

VueJS对象 动态 语法 绑定 Class bind
2023-09-27 14:22:47 时间 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-bind动态绑定class对象语法</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.active{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <h2 class = "active">{{message}}</h2> -->
			<!-- <h2 :class = "active">{{message}}</h2> -->
			
			<!-- <h2 :class = {key1:value1,key2:value2}>{{message}}</h2> -->
			<!-- <h2 :class = {类名1:boolean,类名2:boolean}>{{message}}</h2> -->
			<!-- 后期不需要删除的class对象可以直接利用class绑定 ， 后期需要更改的class可以利用v-bind动态绑定 -->
			<h2 class = "title" :class = {active:isActive,line:isLine}>{{message}}</h2>
			<button @click = "btnClick">点我变换颜色</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue",
					isActive:true,
					isLine:false
				},
				methods:{
					btnClick: function() {
						this.isActive = !this.isActive;
					}
				}
			});
		</script>
	</body>
</html>

代码改进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-bind动态绑定class对象语法</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.active{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <h2 class = "active">{{message}}</h2> -->
			<!-- <h2 :class = "active">{{message}}</h2> -->
			
			<!-- <h2 :class = {key1:value1,key2:value2}>{{message}}</h2> -->
			<!-- <h2 :class = {类名1:boolean,类名2:boolean}>{{message}}</h2> -->
			<!-- 后期不需要删除的class对象可以直接利用class绑定 ， 后期需要更改的class可以利用v-bind动态绑定 -->
			<!-- <h2 class = "title" :class = {active:isActive,line:isLine}>{{message}}</h2> -->
			
			<h2 class = "title" :class = "getClasses()">{{message}}</h2>
			<button @click = "btnClick">点我变换颜色</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue",
					isActive:true,
					isLine:false
				},
				methods:{
					btnClick: function() {
						this.isActive = !this.isActive;
					},
					getClasses: function() {
						return {active:this.isActive,line:this.isLine}
					}
				}
			});
		</script>
	</body>
</html>

相关文章