基本用法

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

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

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

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

数组语法

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

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

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

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

数组语法

  1. <template id="my-app">
  2.   <div :class="[isActive ? 'wyh': '']">呵呵呵呵</div>
  3.   <div :class="[{wyh: isActive}]">呵呵呵呵</div>
  5.   <!-- isActive 为 true 时，等价于 -->
  6.     <div class="why">呵呵呵呵</div>
  8.     <!-- isActive 为 false 时，等价于 -->
  9.     <div class="">呵呵呵呵</div>
  10. </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>
  4.   <!-- 或者 对象变量 -->
  5.     <div class="classObj">呵呵呵呵</div>
  7.     <!-- 或者 通过函数返回值 -->
  8.   <div class="getClassObj()">呵呵呵呵</div>
  10.     <!-- 2个都等价于 -->
  11.     <div class="why title">哈哈哈哈</div>
  13. </template>

数组语法

  1. <template id="my-app">
  2.   <div :class="['abc', title, isActive ? 'why': '']">哈哈哈哈</div>
  3.   <div :class="['abc', title, {why: isActive}]">哈哈哈哈</div>
  5.   <!-- isActive 为 true 时，等价于 -->
  6.     <div class="abc cba why">哈哈哈哈</div>
  8.     <!-- isActive 为 false 时，等价于 -->
  9.     <div class="abc cba">哈哈哈哈</div>
  10. </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>
  6.   <!-- 绑定一个data中的属性值, 并且是一个对象 -->
  7.   <div :style="finalStyleObj">呵呵呵呵</div>
  9.   <!-- 调用一个方法 -->
  10.   <div :style="getFinalStyleObj()">呵呵呵呵</div>
  11. </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