搜尋

首頁 >web前端 >js教程 >4-v-bind指令的分析（附代碼）

4-v-bind指令的分析（附代碼）

不言
不言原創
2018-07-27 12:49:202289瀏覽

這篇文章要跟大家介紹的文章內容是關於4-v-bind指令的分析（附程式碼），有很好的參考價值，希望可以幫助到有需要的朋友。

1. 定義

1.1 v-bind 指令被用來回應地更新 HTML 屬性，其實它是支援單一 JavaScript 運算式 （v-for 除外）。

2. 文法

2.1 完整文法： >，解釋：v-bind 是指令，: 後面的 class 是參數，classProperty 則在官方文件中稱為「預期值」。

2.2 縮寫語法： >，解釋：: 後面的 class 是參數，classProperty 則在官方文件中被稱為“預期值” 。

3. 用法

3.1 綁定一個屬性

全寫程式範例：

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

              

4-v-bind指令的分析（附代碼）


################簡寫程式碼範例：　###
<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="&#39;http://&#39;+first" class="spancss1">{{text}}</a>
</div>
</template>
<script>
export default {
name: "v-bindLearn",
data() {
return {
title: "v-bind学习",
first: "www.baidu.com",
  text: &#39;点击跳转到百度链接&#39;
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>
############3.3 class綁定程式碼範例###
<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>
################################################################################################################################################################################################################## ####3.3.1 物件語法######span標籤綁定一個物件######方法一直接在template中聲明對象，物件中宣告屬性prop1和prop2，在javascrip輸出聲明屬性是否可用，如果聲明屬性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>
######## ####方法二直接在template中宣告物件名，在javascrip中宣告屬性prop1和prop2並輸出是否可用，如果宣告屬性value值設為true，則宣告屬性值可用，如果宣告屬性value值設為false ，則宣告屬性值不可用，程式碼如下所示：###
<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: [&#39;prop1&#39;,&#39;prop2&#39;,&#39;prop3&#39;],
        text: "数组语法1"
      }
    }
  }
</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="[prop1,prop2,prop3]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: &#39;prop1&#39;,
        prop2: false,
        prop3: &#39;prop3&#39;,
        text: "数组语法2"
      }
    }
  }
</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?&#39;prop1&#39;:&#39;&#39;,prop2,prop3?&#39;prop3&#39;:&#39;&#39;,prop4?&#39;prop4&#39;:&#39;prop5&#39;,prop6?&#39;prop6&#39;:&#39;prop5&#39;]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: false,
        prop2: &#39;prop2&#39;,
        prop3: true,
        prop4: true,
        prop6: false,
        text: "数组语法3"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>
# ###########方法三根據條件切換清單中的綁定的class，在template宣告數組和條件表達式，在javascript中輸出數組元素的條件表達式的值，範例程式碼如下： ###
<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="{background:color1,fontSize:fontSize+&#39;px&#39;}" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        color1: &#39;green&#39;,
        fontSize: 25,
        text: "绑定内联样式1"
      }
    }
  }
</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="[prop1,prop2]" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: {
          background:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          fontWeight: &#39;bolder&#39;
        },
        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:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          transform: &#39;rotate(7deg)&#39;
        },
        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="{ display: [&#39;-webkit-box&#39;, &#39;-ms-flexbox&#39;, &#39;flex&#39;] }" 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>
############3.4.4 多重值綁定，從2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶有前綴的值，如果瀏覽器支援不帶瀏覽器前綴的flexbox，那麼就只會渲染 display: flex###rrreee### ######

總結：v-bind動態地綁定一個或多個特性，或一個元件prop 到表達式，可以很方便的渲染DOM

相關建議：

Vue中專案的初始建置流程（圖文）
Vue-cli建置專案後目錄結構的分析（圖文）

以上是4-v-bind指令的分析（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Vue-cli搭建專案後目錄結構的分析（圖文）下一篇：Vue-cli搭建專案後目錄結構的分析（圖文）

相關文章

看更多