vue03--属性与样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性与样式绑定</title>
		<style>
			.fontSize{
				font-size: 30px;
			}
			.backColor{
				background-color: aqua;
			}
			.redcolor{
				color:red;
			}
			.bluecolor{
				color:blue;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--v-bind 实现属性绑定,v-bind可以省略-->
			<div>
				<img v-bind:src="imgurl" :title="title" />
			</div>
			<div>
				<input type="checkbox" :disabled="flag" />
			</div>
			<div :class="{fontSize:styleflag}">
			    样式绑定测试
			</div>
			<p :class="[isFlag?red:blue]">
				三元运算符切换样式
			</p>
		</div>
		<script>
			let vm = new Vue({
				el:'#app',
				data:{
					imgurl:'img/02.jpg',
					title:'测试属性绑定',
					flag:true,
					style1:'fontSize',
					style2:'backColor',
					styleflag:true,
					isFlag:true,
					red:'redcolor',
					blue:'bluecolor'
				}				
			});
		</script>
	</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/gcyqweasd/article/details/113797203