Vue学习之路4-v-bind指令

1. 定义

1.1 v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）。

2. 语法

2.1 完整语法：<span v-bind:class="classProperty"></span >，解释：v-bind 是指令，: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。

2.2 缩写语法：<span :class="classProperty"></span >，解释：: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。

3. 用法

3.1 绑定一个属性

全写代码示例：

<template>
<div>
  <p class="p1">{{title}}</p>
  <span v-bind:value="first" class="spancss1">{{text}}</span>
</div>
</template>
<script>
    export default {
        name: "v-bindLearn",
        data() {
          return {
            title: "v-bind学习",
            first: "span1",
            text: "绑定一个属性"
          }
        }
    }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

简写代码示例：　

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span :value="first" class="spancss1">{{text}}</span>
   </div>
 </template>
 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         first: "span1",
         text: "绑定一个属性"
       }
     }
   }
 </script>
 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

　　　　

3.2 内联字符串拼接代码示例

 <template>
 <div>
 <p class="p1">{{title}}</p>
 <a :href="'http://'+first" class="spancss1">{{text}}</a>
 </div>
 </template>
 <script>
 export default {
 name: "v-bindLearn",
 data() {
 return {
 title: "v-bind学习",
 first: "www.baidu.com",
   text: '点击跳转到百度链接'
 }
 }
 }
 </script>
 <style scoped>
 .p1{
 text-align: left;
 }
 .spancss1{
 float: left;
 }
 </style>

3.3 class绑定

3.3.1 对象语法

span标签绑定一个对象

方法一直接在template中声明对象，对象中声明属性prop1和prop2，在javascrip输出声明属性是否可用，如果声明属性value值设置为true，则声明属性值可用，如果声明属性value值设置为false，则声明属性值不可用，代码如下所示：

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:class="{prop1:isTrue,prop2:isActive}" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         isTrue: false,
         isActive: true,
         text: "对象语法1"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

方法二直接在template中声明对象名，在javascrip中声明属性prop1和prop2并输出是否可用，如果声明属性value值设置为true，则声明属性值可用，如果声明属性value值设置为false，则声明属性值不可用，代码如下所示：

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:class="obj" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         obj: {
           prop1: true,
           prop2: false
         },
         text: "对象语法2"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

3.3.2 数组语法

方法一直接在template中声明数组名，在javascript中输出需要的数组元素，示例代码如下：

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:class="arr" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         arr: ['prop1','prop2','prop3'],
         text: "数组语法1"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

方法二在template中声明数组并定义其元素，在javascript中输出数组定义元素是否可用，如果需要使用此数组元素，则在javascript中定义要输出对应数组元素的属性值，如果不需要使用此数组元素，则设置此数组元素的属性值为false，示例代码如下：

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:class="[prop1,prop2,prop3]" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         prop1: 'prop1',
         prop2: false,
         prop3: 'prop3',
         text: "数组语法2"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

方法三根据条件切换列表中的 绑定的class，在template声明数组和条件表达式，在javascript中输出数组元素的条件表达式的值，示例代码如下：

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:class="[prop1?'prop1':'',prop2,prop3?'prop3':'',prop4?'prop4':'prop5',prop6?'prop6':'prop5']" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         prop1: false,
         prop2: 'prop2',
         prop3: true,
         prop4: true,
         prop6: false,
         text: "数组语法3"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

3.4 绑定内联样式

3.4.1 对象语法，在template中声明属性，在javascript输出对应的属性值，示例代码如下：

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:style="{background:color1,fontSize:fontSize+'px'}" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         color1: 'green',
         fontSize: 25,
         text: "绑定内联样式1"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

3.4.2 数组语法，可以将多个样式对象应用到同一个元素上

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
   </div>
 </template>

 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         prop1: {
           background:'green'
         },
         prop2: {
           fontSize: '25px',
           fontWeight: 'bolder'
         },
         text: "绑定内联样式1"
       }
     }
   }
 </script>

 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

3.4.3 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
   </div>
 </template>
 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         prop1: {
           background:'green'
         },
         prop2: {
           fontSize: '25px',
           transform: 'rotate(7deg)'
         },
         text: "绑定内联样式1"
       }
     }
   }
 </script>
 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

3.4.4 多重值绑定，从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex

 <template>
   <div>
     <p class="p1">{{title}}</p>
     <span v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" class="spancss1">{{text}}</span>
   </div>
 </template>
 <script>
   export default {
     name: "v-bindLearn",
     data() {
       return {
         title: "v-bind学习",
         text: "绑定内联样式4"
       }
     }
   }
 </script>
 <style scoped>
   .p1{
     text-align: left;
   }
   .spancss1{
     float: left;
   }
 </style>

总结：v-bind动态地绑定一个或多个特性，或一个组件 prop 到表达式，可以很方便的渲染DOM，本文的错误和不足之处，欢迎之处！