vue03--属性与样式绑定

最新推荐文章于 2024-07-19 09:54:10 发布

婉菡

最新推荐文章于 2024-07-19 09:54:10 发布

阅读量112

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113797203

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

本文通过一个HTML示例展示了Vue.js中如何使用v-bind进行属性和样式的动态绑定，包括图片的src和title属性、checkbox的disabled状态以及通过class绑定实现不同条件下的样式切换。示例中涉及的数据绑定、条件判断以及类名动态切换是Vue.js前端开发中的基本技巧。

摘要由CSDN通过智能技术生成

<!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/vue@2.5.17/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>

在这里插入图片描述