這篇文章要跟大家介紹的文章內容是關於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>登入後複製
################簡寫程式碼範例： ###
<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綁定程式碼範例###
<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: ['prop1','prop2','prop3'],
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: 'prop1',
prop2: false,
prop3: 'prop3',
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?'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>登入後複製
# ###########方法三根據條件切換清單中的綁定的class，在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 綁定內嵌樣式######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:'green'
},
prop2: {
fontSize: '25px',
fontWeight: 'bolder'
},
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',
transform: 'rotate(7deg)'
},
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: ['-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>登入後複製
############3.4.4 多重值綁定，從2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶有前綴的值，如果瀏覽器支援不帶瀏覽器前綴的flexbox，那麼就只會渲染 display: flex###rrreee### ######
總結：v-bind動態地綁定一個或多個特性，或一個元件prop 到表達式，可以很方便的渲染DOM
相關建議：
Vue中專案的初始建置流程（圖文）
Vue-cli建置專案後目錄結構的分析（圖文）
以上是4-v-bind指令的分析（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
