vue 样式绑定

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

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

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

vue 样式的绑定

可以通过 class 或者 style 属性的绑定来设置。

绑定值可以是对象，也可以是数组：

class 的对象绑定

通过绑定class 属性即 “：class”，然后使用js对象赋给该属性一个数据。

代码： class 绑定的数据叫 activated，它的值为isActivated. 当isActivated 为true时，class 的值为 activated；当isActivated为false时，class的值为空。

<!DOCTYPE html>
<html>
<head>
	<title>样式的绑定</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
	<style type="text/css">
		.activated{
			color: red;
		}
	</style>
</head>
<body>
	<div id="root">
		<div @click="handleDivClick"
			:class="{activated: isActivated}">
			hello world
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#root',
			data:{
				isActivated: false
			},
			methods: {
				handleDivClick: function(){
					// this.isActivated = true;
					this.isActivated = !this.isActivated
				}
			}
		})
	</script>

</body>
</html>

class 的数组绑定

通过“:class” ，绑定一个数组数据

	<div id="second">
		<div @click="handleSecClick"
			:class="[activated,activatedOne]">
			hey
		</div>
	</div>
	<script>
		var vm = new Vue({
			el:"#second",
			data:{
				activated:"",
                activatedOne:""
			},
			methods: {
				handleSecClick: function(){
					if(this.activated === "activated"){
						this.activated = ""
					}else{
						this.activated = "activated"
					}
					
				}
			}
		})
	</script>

style 的绑定

使用 “：style” 绑定style属性，如下代码：

	<div id="third">
	<div @click="handleThirdClick"
		:style="styleObj">
		hey
	</div>
	</div>
	<script>
		var vm = new Vue({
			el:"#third",
			data:{
				styleObj:{
					color:"black"
				}
			},
			methods: {
				handleThirdClick: function(){
					this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
				}
			}
		})
	</script>