样式绑定

最新推荐文章于 2023-03-21 14:36:41 发布

albert48

最新推荐文章于 2023-03-21 14:36:41 发布

阅读量97

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/albert48/article/details/103398404

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>click to change the color</title>
	<script src="./vue.js"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>

	<div id="app">
		<div :class="{activated: isActivated}" @click="changeColor">Hello</div>
	</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				isActivated:false
			},
			methods:{
				changeColor(){
					this.isActivated=!this.isActivated;
				}
			}
		})
	</script>

</body>
</html>

数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>click to change the color</title>
	<script src="./vue.js"></script>
	<style>
		.activated{
			color: red;
		}
	</style>
</head>
<body>

	<div id="app">
		<div :class="[activated]" @click="changeColor">Hello</div>
	</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				activated:''
			},
			methods:{
				changeColor(){
					if(this.activated===''){
						this.activated="activated";
					}
					else{
						this.activated="";
					}
				}
			}
		})
	</script>

</body>
</html>

style绑定

<!DOCTYPE html>
<html>
<head>
	<title>change color</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id='app' :style="changeColor" @click='handleColor'>hello
	</div>


	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				changeColor:{
					color:'black'
				}
			},
			methods:{
				handleColor(){
					this.changeColor.color=this.changeColor.color=='black'?'red':'black'
				}
			}
		})
	</script>


</body>
</html>

也可以写成数组

	<div id='app' :style="[changeColor,{fontSize:'20px'}]" @click='handleColor'>hello</div>

albert48

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式绑定

对象绑定<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>click to change the color</title> <script src="./vue.js"></script> <st...
复制链接

扫一扫