Vue.js教程：v-bind深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/Taojia9958/article/details/124874136

这篇博客详细介绍了Vue.js中的v-bind指令，包括如何动态绑定属性、class和style。内容涵盖v-bind的基本使用，如绑定href和src，动态绑定class的布尔对象和数组用法，以及动态绑定style的对象和数组语法。还讲解了v-bind与v-for的结合应用，以及如何通过点击事件改变元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 v-bind的基本使用

“v-bind基本使用有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。比如动态绑定a元素的href属性比如动态绑定img元素的src属性比如动态绑定一些类、样式这个时候,我们可以使用v-bind指令。 v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值”

<body>
		<!-- v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>: -->
		<div id="app">
			<h3 v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h3>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:'#app',
				data(){
					return {
						// msg:'页面加载于'+new Date().toLocaleString()
						msg:`页面加载于${new Date().toLocaleString()}`
					}
				}
			})
		</script>
	</body>

二、v-bind动态绑定class(对象)

1、用法：通过布尔值决定是否将该类名添加到class上

 <p :class="{类名1:布尔值，类名2：布尔值}"></p>

背景：通过判断给class添加类名，动态改变元素的样式

    <style>
        .active{
            color: red;
        }
    </style>

在class前用v-bind的语法糖，动态绑定class的属性
给class属性创建一个对象，用键值对的方式给类名添加false或true
true则给class添加该类名，false则不添加
true和false可以动态改变

    <div id="app">
        <p :class="{active:isActive,line:isLine}">Hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isActive : true,
                isLine : true
            }
        })
    </script>

2、简化行间代码

行间的代码通过函数返回

    <div id="app">
        <p :class="getClasses()">Hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isActive : true,
                isLine : true
            },
            methods : {
                getClasses : function () {
                    return {active:this.isActive,line:this.isLine}
                }
            }
        })
    </script>

案例：点击按钮，切换p的样式
触发绑定在button上的click的事件，在getActive函数中改变isActive的属性值。

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p :class="getActive()">好好学习</p>
			<button type="button" @click="changeActive()">切换</button>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data(){
					return {
						isactive:true
					}
				},
				methods:{
					getActive(){
						return {
							active:this.isactive
						}
					},
					changeActive(){
						this.isactive=!this.isactive;
					}
				}
			})
		</script>
	</body>

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

1、用法

用法一：直接通过[]绑定一个类

<p :class="['relname']">{{msg}}</p>

用法二：也可以传入多个值

<p :class="['relname','myage']">{{msg}}</p>

用法三：和普通的类同时存在，并不冲突

注：会有title/active/line三个类

<p class='title' :class="['relname','myage']">{{msg}}</p>

用法四：如果过于复杂，可以放在一个methods或者computed中

<p :class="title" :class='classes'>{{msg}}</p>

注：classes是一个计算属性

<p :class="calssName()">{{msg}}</p>

注：calssName()是一个方法

案例：

<body>
		<div id="app">
			<p :class="[relname,myage]">{{msg}}</p>
			<p :class="['relname','myage']">{{msg}}</p>
			<p :class="calssName()">{{msg}}</p>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:'#app',
				data(){
					return{
						msg:'社会主义接班人',
						relname:'name',
						myage:'age'	
					}
				},
				methods:{
					calssName(){
						return [this.relname,this.myage]
					}
				}
			})
		</script>
	</body>

四、04 v-for和v-bind结合

题目：要求点击某个li，这个li的字体变为蓝色

代码：

<!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>
			
			<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) {//a是形参
						console.log(a);
						this.currentIndex = a
					}
				}
			})
		</script>
	</body>
</html>

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

style后面跟的是一个对象类型

对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

：style="{color:currentColor,fontsize:fontsize+'px'}"

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p :style="change()">臭豆腐</p>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data() {
					return {
						fontsize:'50px',
						color:'orange'
					}
				},
				methods:{
					change(){
						return {
							fontSize:this.fontsize,
							color:this.color
						}
					}
				}
			})
		</script>
	</body>
</html>

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

style后面跟的是一个数组类型多个值以，分割即可

<div v-bind:style="[baseStyle1,baseStyle2]"></div>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p :style="change">社会主义</p>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:'#app',
				data() {
					return {
						change:{
							fontSize:'50px',
							color:'red'
						}
					}
				}
			})
		</script>
	</body>
</html>

vue基础教学（2）