Vue中的样式绑定

原创

梁十八 2019-07-10 17:00:10 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者梁十八的原创作品，请联系作者获取转载授权，否则将追究法律责任

class样式绑定：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./vue.js"></script>
	<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
	<style type="text/css">
		.activated{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="app">
		<div @click="handleDivClick" :class="{activated: isActivated}">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				isActivated: false
			},
			methods: {
				handleDivClick: function() {
					this.isActivated = !this.isActivated
				}
			}
		})
	</script>
</body>
</html>

数组变量的绑定

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./vue.js"></script>
	<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
	<style type="text/css">
		.activated{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<!-- <div id="app">
		<div @click="handleDivClick" :class="{activated: isActivated}">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				isActivated: false
			},
			methods: {
				handleDivClick: function() {
					this.isActivated = !this.isActivated
				}
			}
		})
	</script> -->
	<div id="app">
		<div @click="handleDivClick" :class="[activated]">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				activated: ""
			},
			methods: {
				handleDivClick: function() {
					if (this.activated === "activated") {
						this.activated = "";
					}else {
						this.activated = "activated";
					}
				}
			}
		})
	</script>
</body>
</html>

style绑定：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./vue.js"></script>
	<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
	<!-- <div id="app">
		<div @click="handleDivClick" :class="{activated: isActivated}">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				isActivated: false
			},
			methods: {
				handleDivClick: function() {
					this.isActivated = !this.isActivated
				}
			}
		})
	</script> -->
	<div id="app">
		<div :style="styleObj" @click="handleDivClick">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				styleObj: {
					color: "black"
				}
			},
			methods: {
				handleDivClick: function() {
					if (this.styleObj.color == "black") {
						this.styleObj.color = "red"
					}else {
						this.styleObj.color = "black"
					}
				}
			}
		})
	</script>
</body>
</html>

style数组绑定：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./vue.js"></script>
	<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
	<!-- <div id="app">
		<div @click="handleDivClick" :class="{activated: isActivated}">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				isActivated: false
			},
			methods: {
				handleDivClick: function() {
					this.isActivated = !this.isActivated
				}
			}
		})
	</script> -->
	<!-- <div id="app">
		<div :style="styleObj" @click="handleDivClick">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				styleObj: {
					color: "black"
				}
			},
			methods: {
				handleDivClick: function() {
					if (this.styleObj.color == "black") {
						this.styleObj.color = "red"
					}else {
						this.styleObj.color = "black"
					}
				}
			}
		})
	</script> -->
	<div id="app">
		<div :style="[styleObj, {background:'yellow'}]" @click="handleDivClick">hello world</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				styleObj: {
					color: "black",
					border:"1px solid red"
				}
			},
			methods: {
				handleDivClick: function() {
					if (this.styleObj.color == "black") {
						this.styleObj.color = "red"
					}else {
						this.styleObj.color = "black"
					}
				}
			}
		})
	</script>
</body>
</html>