2_5 Vue 样式绑定

最新推荐文章于 2024-10-08 17:26:50 发布

上晴下雪

最新推荐文章于 2024-10-08 17:26:50 发布

阅读量98

点赞数

分类专栏： vue 文章标签： vue js html css javascript

本文链接：https://blog.csdn.net/xueerkeji/article/details/106046263

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue 样式绑定

class 对象绑定方式

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--class 对像绑定-->
		<!--js表达式，这个div元素标有一个class,名字activated, 显不显示取决于isActivated-->
		<div 
			@click="handleDivClick"
			:class="{activated: isActivated}"
		>你好，中国</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				isActivated:false,
			},
			methods:{
				handleDivClick:function(){
					this.isActivated=!this.isActivated;
				}
			}

		})
	</script>
</body>
</html>

class 数组帮定方式

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--class 数组绑定-->
		<!--js表达式，这个div元素标有一个class,名字activated, 显不显示取决于isActivated-->
		<div 
			@click="handleDivClick"
			:class="[activated]"
		>你好，中国</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				activated:'activated',
			},
			methods:{
				handleDivClick:function(){
					//三元运算符
					this.activated= this.activated==='activated' ? '':'activated';
				}
			}

		})
	</script>
</body>
</html>

style 对象绑定方式

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="app">
		<!--style 对象绑定-->
		<!--js表达式，这个div元素标有一个class,名字activated, 显不显示取决于isActivated-->
		<div 
			@click="handleDivClick"
			:style="styleObj"
		>你好，中国</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				styleObj:{
					color:'black'
				}
			},
			methods:{
				handleDivClick:function(){
					//三元运算符
					this.styleObj.color= this.styleObj.color==='black' ? 'red':'black';
				}
			}

		})
	</script>
</body>
</html>

style 数组绑定方式

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="app">
		<!--style 数组绑定，可绑定多个-->
		<!--js表达式，这个div元素标有一个class,名字activated, 显不显示取决于isActivated-->
		<div 
			@click="handleDivClick"
			:style="[styleObj,{fontSize:'30px'}]"
		>你好，中国</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				styleObj:{
					color:'black'
				}
			},
			methods:{
				handleDivClick:function(){
					//三元运算符
					this.styleObj.color= this.styleObj.color==='black' ? 'red':'black';
				}
			}

		})
	</script>
</body>
</html>