基本用法
除了内容可以用{{ }}动态来决定外,某些属性我们也希望动态来绑定。
如图片的src、a标签的href等,这些从服务器请求的东西,
又或者是绑定class,让元素动态拥有某些css属性。
v-bind: 属性
可以简写为
:属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 原生HTML写法 -->
<img src="imgUrl" alt="">
<!-- 1.v-bind的基本使用 -->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">百度一下</a>
<!-- 2.v-bind提供一个语法糖 : -->
<img :src="imgUrl" alt="">
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
imgUrl: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
link: "https://www.baidu.com"
}
}
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
======================
绑定class
1、绑定1个class
data() {
return {
className: "why",
};
},
对象语法
<template id="my-app">
<div :class="className">哈哈哈哈</div>
<!-- 等价于 -->
<div class="why">哈哈哈哈</div>
</template>
数组语法
<template id="my-app">
<div :class="[className]">哈哈哈哈</div>
<!-- 等价于 -->
<div class="why">哈哈哈哈</div>
</template>
2、绑定1个class,动态显示
可以根据某个变量,动态决定有没有这个class,可以通过方法控制这个变量
对象语法
<template id="my-app">
<div :class="{'why': isActive}">呵呵呵呵</div>
<!-- isActive 为 true 时,等价于 -->
<div class="why">呵呵呵呵</div>
<!-- isActive 为 false 时,等价于 -->
<div class="">呵呵呵呵</div>
</template>
数组语法
<template id="my-app">
<div :class="[isActive ? 'wyh': '']">呵呵呵呵</div>
<div :class="[{wyh: isActive}]">呵呵呵呵</div>
<!-- isActive 为 true 时,等价于 -->
<div class="why">呵呵呵呵</div>
<!-- isActive 为 false 时,等价于 -->
<div class="">呵呵呵呵</div>
</template>
3、绑定多个class,动态显示
可以根据某些变量,动态决定有没有这个class,可以通过方法控制这个变量
data() {
return {
classObj: "wyh",
title: "cba",
isActive: true
};
},
methods: {
getClassObj() {
return {
active: true,
title: true
}
}
},
对象语法
<template id="my-app">
<div :class="{why: isActive, title: true}">呵呵呵呵</div>
<!-- 或者 对象变量 -->
<div class="classObj">呵呵呵呵</div>
<!-- 或者 通过函数返回值 -->
<div class="getClassObj()">呵呵呵呵</div>
<!-- 2个都等价于 -->
<div class="why title">哈哈哈哈</div>
</template>
数组语法
<template id="my-app">
<div :class="['abc', title, isActive ? 'why': '']">哈哈哈哈</div>
<div :class="['abc', title, {why: isActive}]">哈哈哈哈</div>
<!-- isActive 为 true 时,等价于 -->
<div class="abc cba why">哈哈哈哈</div>
<!-- isActive 为 false 时,等价于 -->
<div class="abc cba">哈哈哈哈</div>
</template>
4、默认的class合并
<template id="my-app">
<div class="abc cba" :class="{active: isActive, title: true}">
</template>
======================
绑定style
data() {
return {
finalColor: 'red',
finalFontSize: 50,
finalStyleObj: {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
},
style2Obj: {
textDecoration: "underline"
}
}
},
methods: {
getFinalStyleObj() {
return {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
}
对象语法
<template id="my-app">
<!-- :style="{cssPropertyName: cssPropertyValue}" -->
<div :style="{color: finalColor, fontSize: '30px'}">哈哈哈哈</div>
<div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">哈哈哈哈</div>
<!-- 绑定一个data中的属性值, 并且是一个对象 -->
<div :style="finalStyleObj">呵呵呵呵</div>
<!-- 调用一个方法 -->
<div :style="getFinalStyleObj()">呵呵呵呵</div>
</template>
数组语法
<template id="my-app">
<div :style="[finalStyleObj, style2Obj]">哈哈哈</div>
</template>
======================
动态绑定属性
基本
<template id="my-app">
<div :[name]="value">哈哈哈</div>
</template>
data() {
return {
name: "cba",
value: "kobe"
}
}
绑定一个对象(重要)
<template id="my-app">
<div v-bind="info">哈哈哈哈</div>
<div :="info">哈哈哈哈</div>
</template>
data() {
return {
info: {
name: "why",
age: 18,
height: 1.88
}
}
}
这样做的好处,就是封装组件的时候,可以通过传一个对象,把所有的属性一次过传上去,非常方便而且重要
拿ant-design-vue的表格组件为例,下面这一大段都可以写在一个对象里面,只要传1个属性就可以了