动态绑定属性,v-bind的深入学习

最新推荐文章于 2024-05-10 18:15:56 发布

北栀໊ღ

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量782

点赞数

分类专栏： VUE 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/whlovedlw/article/details/124867045

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. v-bind的基本使用

v-bind的语法糖格式：v-bind: === ：这里我们缩减成了 : 符号,v-bind可以直接可以省略。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
            <span :title="msg">鼠标放上去看看</span>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						msg:"页面加载于"+new Date().toLocaleString()
					}
				},
				methods: {
                 
				},
				computed:{
					
				}
			})
		</script>
	</body>
</html>

2. v-bind动态绑定类

(1). v-bind动态绑定class（对象语法）

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上，当Dom元素有此class时候，变红，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				color: #f00;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 :class="getactive()">我是学生</h2>
			<button type="button" @click="changeActive()">切换</button>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						isactive: true
					}
				},
				methods: {
					getactive() {
						return {
							active: this.isactive
						}
					},
					changeActive(){
						this.isactive = !this.isactive
					}
				},
				computed: {

				}
			})
		</script>
	</body>
</html>

第二张图片可以看出，我们通过点击切换按钮来改变字体颜色，这就是通过动态绑定来实现的。

(2) v-bind动态绑定class(数组用法)

class属性中可以放数组，会依次解析成对应的class。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
             <h2 class="title" :class="['active','line']">{{message}}</h2>
			 
			 <h2 class="title" :class="[active,line]">{{message}}</h2>
			 
			  <h2 class="title" :class="getClasses()">{{message}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return{
						message:"你好啊",
						active:'aaa',
						line:'bbb'
					}
				},
				methods: {
                   getClasses(){
					   return [this.active,this.line]
				   }
				},
				computed:{
					
				}
			})
		</script>
	</body>
</html>

(3) v-for和v-bind结合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 对象的写法 -->
			<ul>
				
				<li v-for="(item,index) in movies" :key="index" :class="{active:index==currentIndex}" @click="changeColor(index)">{{index}}--{{item}}</li>
			</ul>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						currentIndex: 0,
						movies: ["中国", "美国", "英国", "德国"]
					}
				},
				methods: {
					changeColor(a) {
						console.log(a);
						this.currentIndex = a
					}
				},
				computed: {

				}
			})
		</script>
	</body>
</html>

这两张图图片我可以看到通过点击序号里的文字他的字体也会随着改变颜色，里面通过v-for时候的索引索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给，使用绑定class，当Dom元素有active的class，颜色变红。

这里我们也可以通过三元表达式也可以做到改变颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 三元表达式 -->
			<ul>
				<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="changeColor(index)">{{index}}--{{item}}</li>
			</ul>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						currentIndex: 0,
						movies: ["中国", "美国", "英国", "德国"]
					}
				},
				methods: {
					changeColor(a) {
						console.log(a);
						this.currentIndex = a
					}
				},
				computed: {

				}
			})
		</script>
	</body>
</html>

通过结果我们可以看出来用三元表达式的结果也是可以的。

(4) v-bind动态绑定style(对象)

第一种放在script里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
		  <h2 :style="getStyle()">暑期将至</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return {
						fontsize:'100px',
					}
				},
				methods: {
                    getStyle(){
						return {fontSize:this.fontsize}
					}
				},
				computed:{
					
				}
			})
		</script>
	</body>
</html>

第二种放在标签里:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
		  <h2 :style="{fontSize:'100px'}">暑期将至</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return{fontSize:this.fontsize}
				},
				methods: {
				},
				computed:{
					
				}
			})
		</script>
	</body>
</html>

可以看到这两种方式的结果是一样的，所以我们可以选着自己熟悉的方式去使用，我本人还是喜欢第二种,写在标签里，个人感觉会方便点。

(5) v-bind动态绑定style(数组语法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
           <h2 :style="getstyle">暑期将至</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return {
						getstyle:{fontSize:'100px',color:'red'}
					}
				},
				methods: {
                 
				},
				computed:{
					
				}
			})
		</script>
	</body>
</html>