03-Vue的动态绑定属性(一)
v-bind的基本使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<img v-bind:src="imgURL" alt="" />
<a :href="aHref">百度一下a>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
imgURL:
"https://img13.360buyimg.com/mobilecms/s280x280_jfs/t1/88990/27/10628/194757/5e1edbcdE742f1831/14c8cd589a907c59.jpg.webp",
aHref: "http://www.baidu.com"
}
})
script>
body>
html>
1.为什么用v-bind
如当前代码，如果想让img的src使用变量imgURL，就必须使用v-biind绑定src，否则vue后台会去找一个叫imgURL的路径，显然是找不到的。个人理解是在v-bind绑定之后，vue系统会将该变量解析成字符串，从而找到对应的路径。
2.使用须知
不仅如此，所有标签中的属性只要用到变量就需要用b-bind绑定。
v-bind动态绑定class(对象语法)
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<style>
.active {
color: red;
}
.active2 {
font-size: 36px;
font-style: italic;
}
style>
head>
<body>
<div id="app">
<h2 class="active">{{message}}h2>
<h2 :class="active">{{message}}h2>
<h2 :class="{active: isActive, active2:isActive2}">{{message}}h2>
<h2 class="title" :class="getClasses()">{{message}}h2>
<button v-on:click="btnClick">更改button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
active: "active2",
isActive: true,
isActive2: true
},
methods: {
btnClick: function() {
this.isActive = !this.isActive
},
getClasses: function() {
return { active: this.isActive, active2: this.isActive2 }
}
}
})
script>
body>
html>
1.v-bind对象语法的用法
<h2 class=“active”>{{message}}h2>
<h2 :class=“active”>{{message}}h2>
第一行中的类是去style中找到一个active的类选择器，而第二行中的active是去data中找一个叫active的变量，然后将active的值放在此处。上文的代码中data中的active变量字符串内容是active2，所以第二行内容和
<h2 class=“active2”>{{message}}h2>
的渲染结果是一样的。
2.注意事项
- 如果一个标签想要绑定两个以上的类，则可以使用对象语法，具体如下：
<h2 :class="{类名1: boolean, 类名2:boolean}">{{message}}h2>
其中的boolean也可以用data中的变量替换，切记类名和变量名都不要加引号。
- 如果感觉多个类名放在htm标签中不美观，可以将:class=" "引号中的内容放在vue的methods中或者computed(计算属性)中，自己封装方法或者变量获取。
- 如果在此手写原生的class，系统会自动合并而不会出现覆盖。
<h2 class=“title” :class="{active: isActive, active2:isActive2}">{{message}}h2>
此时h2会有三个类，分别是active，active2和title
v-bind动态绑定class(数组语法)
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<h2 :class="['active','active2']">{{message}}h2>
<h2 :class="[active,active2]">{{message}}h2>
<h2 :class="getClasses()">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
active: "test",
active2: "test2"
},
methods: {
getClasses: function() {
return [this.active, this.active2]
}
}
})
script>
body>
html>
1.b-bind数组语法的用法
<h2 :class="[‘active’,‘active2’]">{{message}}h2>
在上行代码中，active和active2都表示h2的所带的类，此时’ '表示这是一个字符串，所以注意一定要带上引号。控制台中的效果如下：
而如果想要像对象语法一样使用变量，只需要在data中提前定义变量即可，此时不带单引号的表示变量中的内容。
<h2 :class="[active,active2]">{{message}}h2>
控制台中的效果如下：
2.数组语法和对象语法的对比
二者都可以绑定style中的属性，也都可以绑定data中的变量，但是相比较来说，对象语法更容易理解和使用，且不用引号容错率较高，所以对象语法再受大家欢迎。
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。