Vue学习笔记绑定样式的4种方法

通过Vue绑定样式来做到切换：

第一种

<!DOCTYPE html>
<head>
	<title>样式自定义</title>
	<script type="text/javascript" src="vue.js"></script>
	<style>
	.ChangeColor {
		color: red;
	}
	</style>
</head>
<body>
	<div id="app">
		<div @click="handleChangeClick"
			 :class="{ChangeColor:isChangeColor}"
		>
			Hello World
		</div>
	</div>
</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			isChangeColor: false
		},
		methods: {
			handleChangeClick: function() {
				this.isChangeColor = !this.isChangeColor
			}
		}
	})
</script>
</html>

第二种：

<!DOCTYPE html>
<head>
	<title>样式自定义</title>
	<script type="text/javascript" src="vue.js"></script>
	<style>
	.ChangeColor {
		color: red;
	}
	</style>
</head>
<body>
	<div id="app">
		<div @click="handleChangeClick"
			 :class="[ChangeColor]"
		>
			Hello World
		</div>
	</div>
</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			ChangeColor: ""
		},
		methods: {
			handleChangeClick: function() {
				this.ChangeColor = this.ChangeColor === "" ? "ChangeColor" : ""
			}
		}
	})
</script>
</html>

第三种：（不再是:class 而是: style）

<!DOCTYPE html>
<head>
	<title>样式自定义</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div @click="handleChangeClick"
			 :style="styleObj"
		>
			Hello World
		</div>
	</div>
</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			styleObj: {
				color: "black"
			}
		},
		methods: {
			handleChangeClick: function() {
				this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
			}
		}
	})
</script>
</html>

第四种：

跟第三种基本一样只是这里改变了

:style="[styleObj]"

第二种（就是:class[]可以放多个元素）

:class="[ChangeColor, ChangeColor-one]"

#在data中添加相应变量：

data: {
ChangeColor: "",
ChangeColor-one: "abc"
}

#这里要注意 font-size不能在这么写  跟这个一样格式的样式都必须去掉中间‘-’ 然后第二个单词首字母大写
:style="[styleObj, {fontSize: '3opx'}]"

Vue学习笔记 绑定样式的4种方法

猜你喜欢

Vue学习笔记绑定样式的4种方法