目录
一、 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">
<!-- 错误的做法这里不能使用Mustache语法 -->
<!-- <img v-bind:src="{{imgURL}}" alt=""> -->
<!-- 正确的做法使用v-bind指令 -->
<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/vue@2.6.10/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="{active:currentIndex==index}" @click="change(index)">{{item}}</li> -->
<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>
有关v-bind 与class 和style 绑定相关的内容请参考：Class 与 Style 绑定 — Vue.jsVue.js - The Progressive JavaScript Framework
https://cn.vuejs.org/v2/guide/class-and-style.html
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
