03-Vue动态属性的绑定代码

最新推荐文章于 2024-10-21 19:03:54 发布

瓜娃子qaq

最新推荐文章于 2024-10-21 19:03:54 发布

阅读量140

点赞数

分类专栏： Vue 文章标签： Vue视频练习 Vue代码

本文链接：https://blog.youkuaiyun.com/weixin_45699925/article/details/103005079

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

1、V-bind指令的使用

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<!--错误的做法:这里不可以使用mustache语法-->
		<!--		<img src="{{imgURL}}" alt="">-->
		<!--正确的做法:使用v-bind指令,动态绑定变量-->
		<img v-bind:src="imgURL" alt="">
		<a v-bind:href="aHref">百度一下</a>
		<!--简写  直接 ：-->
		<img :src="imgURL" alt="">
		<a :href="aHref">百度一下</a>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				imgURL: 'img/PC.png',
				aHref: 'http://www.baidu.com'
			}
		});
	</script>
</body>
</html>

2、v-bind动态绑定class（对象语法）

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
	<style>
		.active {
			color: blue;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--		<h2 class="active">{{message}}</h2>-->
		<!--		<h2 :class="active">{{message}}</h2>-->
		<!--		<h2 :class="{key1: value1, key2: value2}">{{message}}</h2>-->
		<!--		<h2 :class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->
		<!--类名自动合并-->
		<!--		<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>-->
		<h2 class="title" :class="getClasses()">{{message}}</h2>
		<button v-on:click="btnClick">按钮</button>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				isActive: true,
				isLine: true
			},
			methods: {
				btnClick: function () {
					//this.isActive 取反
					this.isActive = !this.isActive;
				},
				getClasses: function () {
					return {active: this.isActive, line: this.isLine};
				}
			}
		});
	</script>
</body>
</html>

3、v-bind动态绑定class（数组语法）

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<!--		<h2 class="title" :class="[active,line]">{{message}}</h2>-->
		<h2 class="title" :class="getClasses()">{{message}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				active: 'active',
				line: 'line'
			},
			methods: {
				getClasses: function () {
					return [this.active, this.line];
				}
			}
		});
	</script>
</body>
</html>

4、v-bind动态绑定style（对象语法）

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<!--		<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
		<!--		可以用驼峰命名法 也可加- 50px必须加引号,不然当作变量去解析-->
		<!--		<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
		<h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				finalSize: 50,
				finalColor: 'red'
			}
		});
	</script>
</body>
</html>

5、v-bind动态绑定style（数组语法）

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				baseStyle: {backgroundColor: 'red'},
				baseStyle1: {fontSize: '100px'}
			}
		});
	</script>
</body>
</html>