目录
一、 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===currentIndex
Dom元素有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 Frameworkhttps://cn.vuejs.org/v2/guide/class-and-style.html