当前位置：网站首页>v-bind动态绑定

v-bind动态绑定

2022-08-02 03:35:00 【呦呦鹿鸣[email protected]】

一、 v-bind的基本使用

1. v-bind的基本使用

2. Class 与 Style 绑定

二、 v-bind动态绑定class

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

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

三、 v-for和v-bind结合

四、v-bind动态绑定style

1. v-bind动态绑定style(对象语法)

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

一、 v-bind的基本使用

1. v-bind的基本使用

某些时候我们并不想将变量放在标签内容中，像这样 <h2>{ {message}}</h2> 是将变量h2标签括起来，类似 js的innerHTML。

但是我们期望将变量 imgURL 写在如下位置，想这样 <img src="imgURL" alt=""> 导入图片是希望动态获取图片的链接，此时的imgURL 并非变量而是 字符串 imgURL，如果要将其生效为变量，需要使用到一个标签 v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{ {imgURL}}" alt="">，这也是错误的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind的基本使用</title>
</head>
<body>
<div id="app">



<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf"></a>

<img :src="imgURL" alt="">
<a :href="aHerf"></a>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
aHerf:"http://www.baidu.com"
}
})
</script>
</body>
</html>

此时vue对象中定义的 imgURL 变量和 aHerf 变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:由于用的很多，vue对他有一个语法糖的优化写法也就是:，此时修改imgURL变量图片会重新加载。

2. Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。v-bind 在处理 class 和 style 时，表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

二、 v-bind动态绑定class

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

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有此class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
color:#f00;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="{active:isactive}" @click="change">{ {msg}}</h2>
<h2 :class="changeActive()" @click="change">{ {msg}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
msg:'动态绑定对象',
isactive:false
}
},
methods:{
change(){
this.isactive = !this.isactive
},
changeActive(){
return {active:this.isactive}
}
}

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

定义两个变量 active 和 isActive，在Dom元素中使用 :class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击文字this.isActive = !this.isActive，控制Dom元素是否有 class='active' 的属性。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 :class="['active','aaa']">我们正在学习vue</h2>
<h2 :class="[active,aaa]">我们正在学习vue</h2>
<h2 :class="getStyle()">我们正在学习vue</h2>
</div>
<script>
/* 数组中加引号和不加引号有区别
加引号:表示字符串是固定的,
不加引号:表示变量是不固定的 */
const vm = new Vue({
el:'#app',
data(){
return {
active:'isactive',
aaa:'bbb'
}
},
methods:{
getStyle(){
return [this.active,this.aaa]
}
}

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

加上单引号的表示字符串
不加的会当成变量
可以直接使用方法返回数组对象

三、 v-for和v-bind结合

使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
color: #f00;
}
</style>
</head>
<body>
<div id="app">
<ul>

<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{ {item}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
currentIndex: 0,
movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
}
},
methods: {
change(i) {
/* this.currentIndex = i */
if (this.currentIndex == i) return
this.currentIndex = i
}
}
})
</script>
</body>
</html>

v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。

四、v-bind动态绑定style

1. v-bind动态绑定style(对象语法)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
fontsize:40+'px'
}
},
methods:{
getStyle(){
return {fontSize:this.fontsize}
}
}

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

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

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

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

类似绑定class，绑定style也是一样的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle]">我们爱学习</h2>
<h2 :style="['baseStyle']">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
baseStyle:{background:'#f00'}
}
},
methods:{
getStyle(){
return [this.baseStyle]
}
}

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