Vue.js 样式绑定：v-bind指令动态绑定

最新推荐文章于 2024-05-23 07:33:10 发布

Dragon焱

最新推荐文章于 2024-05-23 07:33:10 发布

阅读量419

点赞数

文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_48139742/article/details/125559193

版权

案例1：给对象的属性绑定值（轮播图）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app2{
				height: 100px;
				width: 120px;
				background-color: antiquewhite;
				border: 2px solid rosybrown;
			}
			img{
				width: 120px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<script src="js/vue.js"></script>
		<div id="app">
			<div id="app2">
				<!-- 给对象的属性绑定值 -->
				<img v-bind:src="'img/'+url+'.jpeg'" >
				<!-- <img :src="'img/'+url+'.jpeg'" >
				<img :src="'img/'+url+'.jpeg'" > -->
			</div>
			<button v-on:click="add">下一张</button>
			<button v-on:click="minus">上一张</button>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					url:0
				},
				methods:{
					add(){
						this.url++
						if(this.url>=3){
							return this.url=0;
						}
					},
					minus(){
						this.url--
						if(this.url<0){
							return this.url=2;
						}
					}
				
				}
			})
		</script>
	</body>
</html>

效果展示图：

案例2：class 属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app2{
				width: 100px;
				height: 100px;
				background-color: #e1fa84;
			}
			.p1{
				width: 100px;
				height: 100px;
				background-color: #ebd4ff;
			}
			.p2{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<script src="js/vue.js"></script>
		
		<div id="app">
			<div id="app2" >
				<p :class="{p1:a>=5,p2:a>=10}">
					{{a}}
				</p>
				
			</div>
			<button @click="add">加</button>
			<button @click="minus">减</button>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					a:0
				},
				methods:{
					add(){
						this.a++
					},
					minus(){
						this.a--
					}
				}
			})
		</script>
	</body>
</html>

案例3：style 属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			#app2{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<div id="app2" :style="{width: a+'px'}"></div>
			
			<button @click="add">加</button>
			<button @click="minus">减</button>
			
		</div>
		
		<script>
			var vue = new Vue({
				el:'#app',
				data:{
					a: 100
				},
				
				methods:{
					add(){
						this.a+=4
					},
					minus(){
						this.a-=2
					}
				}
			})
		</script>
	</body>
</html>