基本用法

除了内容可以用{{ }}动态来决定外,某些属性我们也希望动态来绑定。

如图片的src、a标签的href等,这些从服务器请求的东西,
又或者是绑定class,让元素动态拥有某些css属性。

v-bind: 属性
可以简写为
:属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. <template id="my-app">
  12. <!-- 原生HTML写法 -->
  13. <img src="imgUrl" alt="">
  14. <!-- 1.v-bind的基本使用 -->
  15. <img v-bind:src="imgUrl" alt="">
  16. <a v-bind:href="link">百度一下</a>
  17. <!-- 2.v-bind提供一个语法糖 : -->
  18. <img :src="imgUrl" alt="">
  19. </template>
  20. <script src="https://unpkg.com/vue@next"></script>
  21. <script>
  22. const App = {
  23. template: '#my-app',
  24. data() {
  25. return {
  26. imgUrl: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
  27. link: "https://www.baidu.com"
  28. }
  29. }
  30. }
  31. Vue.createApp(App).mount('#app');
  32. </script>
  33. </body>
  34. </html>

======================

绑定class

image.png

1、绑定1个class

  1. data() {
  2. return {
  3. className: "why",
  4. };
  5. },

对象语法

  1. <template id="my-app">
  2. <div :class="className">哈哈哈哈</div>
  3. <!-- 等价于 -->
  4. <div class="why">哈哈哈哈</div>
  5. </template>

数组语法

  1. <template id="my-app">
  2. <div :class="[className]">哈哈哈哈</div>
  3. <!-- 等价于 -->
  4. <div class="why">哈哈哈哈</div>
  5. </template>

2、绑定1个class,动态显示

可以根据某个变量,动态决定有没有这个class,可以通过方法控制这个变量
对象语法

  1. <template id="my-app">
  2. <div :class="{'why': isActive}">呵呵呵呵</div>
  3. <!-- isActive 为 true 时,等价于 -->
  4. <div class="why">呵呵呵呵</div>
  5. <!-- isActive 为 false 时,等价于 -->
  6. <div class="">呵呵呵呵</div>
  7. </template>

数组语法

  1. <template id="my-app">
  2. <div :class="[isActive ? 'wyh': '']">呵呵呵呵</div>
  3. <div :class="[{wyh: isActive}]">呵呵呵呵</div>
  4. <!-- isActive 为 true 时,等价于 -->
  5. <div class="why">呵呵呵呵</div>
  6. <!-- isActive 为 false 时,等价于 -->
  7. <div class="">呵呵呵呵</div>
  8. </template>

3、绑定多个class,动态显示

可以根据某些变量,动态决定有没有这个class,可以通过方法控制这个变量

  1. data() {
  2. return {
  3. classObj: "wyh",
  4. title: "cba",
  5. isActive: true
  6. };
  7. },
  8. methods: {
  9. getClassObj() {
  10. return {
  11. active: true,
  12. title: true
  13. }
  14. }
  15. },

对象语法

  1. <template id="my-app">
  2. <div :class="{why: isActive, title: true}">呵呵呵呵</div>
  3. <!-- 或者 对象变量 -->
  4. <div class="classObj">呵呵呵呵</div>
  5. <!-- 或者 通过函数返回值 -->
  6. <div class="getClassObj()">呵呵呵呵</div>
  7. <!-- 2个都等价于 -->
  8. <div class="why title">哈哈哈哈</div>
  9. </template>

数组语法

  1. <template id="my-app">
  2. <div :class="['abc', title, isActive ? 'why': '']">哈哈哈哈</div>
  3. <div :class="['abc', title, {why: isActive}]">哈哈哈哈</div>
  4. <!-- isActive 为 true 时,等价于 -->
  5. <div class="abc cba why">哈哈哈哈</div>
  6. <!-- isActive 为 false 时,等价于 -->
  7. <div class="abc cba">哈哈哈哈</div>
  8. </template>

4、默认的class合并

  1. <template id="my-app">
  2. <div class="abc cba" :class="{active: isActive, title: true}">
  3. </template>

======================

绑定style

image.png

  1. data() {
  2. return {
  3. finalColor: 'red',
  4. finalFontSize: 50,
  5. finalStyleObj: {
  6. 'font-size': '50px',
  7. fontWeight: 700,
  8. backgroundColor: 'red'
  9. },
  10. style2Obj: {
  11. textDecoration: "underline"
  12. }
  13. }
  14. },
  15. methods: {
  16. getFinalStyleObj() {
  17. return {
  18. 'font-size': '50px',
  19. fontWeight: 700,
  20. backgroundColor: 'red'
  21. }
  22. }
  23. }

对象语法

  1. <template id="my-app">
  2. <!-- :style="{cssPropertyName: cssPropertyValue}" -->
  3. <div :style="{color: finalColor, fontSize: '30px'}">哈哈哈哈</div>
  4. <div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">哈哈哈哈</div>
  5. <!-- 绑定一个data中的属性值, 并且是一个对象 -->
  6. <div :style="finalStyleObj">呵呵呵呵</div>
  7. <!-- 调用一个方法 -->
  8. <div :style="getFinalStyleObj()">呵呵呵呵</div>
  9. </template>

数组语法

  1. <template id="my-app">
  2. <div :style="[finalStyleObj, style2Obj]">哈哈哈</div>
  3. </template>

======================

动态绑定属性

基本

image.png

  1. <template id="my-app">
  2. <div :[name]="value">哈哈哈</div>
  3. </template>
  1. data() {
  2. return {
  3. name: "cba",
  4. value: "kobe"
  5. }
  6. }

绑定一个对象(重要)

  1. <template id="my-app">
  2. <div v-bind="info">哈哈哈哈</div>
  3. <div :="info">哈哈哈哈</div>
  4. </template>
  1. data() {
  2. return {
  3. info: {
  4. name: "why",
  5. age: 18,
  6. height: 1.88
  7. }
  8. }
  9. }

image.png

这样做的好处,就是封装组件的时候,可以通过传一个对象,把所有的属性一次过传上去,非常方便而且重要

拿ant-design-vue的表格组件为例,下面这一大段都可以写在一个对象里面,只要传1个属性就可以了
image.png image.png