知識點：

???? v-bind 動態綁定標簽屬性

???? v-bind 可簡寫為 :

???? 使用v-bind 綁定class和內聯樣式

???? 使用v-if,v-show,v-else進行條件渲染

?

<template>
<div>
(1) v-bind a標簽跳轉頁面

<a v-bind:href="link">to baidu</a> <!-- v-bind:==:--> 點擊to baidu跳轉到百度首頁

效果：

數據：


link的值，為跳轉的地址 http://www.baidu.com


（2-1） v-bind 綁定class
<a class="link-href" v-bind:class="className">to baidu1111</a> <!-- className是一個對象-->
效果：

數據：
data(){
return{
link: 'http://www.baidu.com',
classStr:'red-font',
className:{
'red-front':true, true顯示，false不顯示
'bule-front':true,
'yellow-front':false
}, （2-1）
<a class="link-href" v-bind:class="[classA,{'red-front':hasError}]">to baidu2222</a> <!-- class為一個集合，classA是一個變量，asError也是一個變量--> 效果：

數據：

classA: 'hello',
hasError:true,

（3）v-bind 綁定內聯樣式CSS

<a class="link-href" :style="linkCss">to baidu3333</a> <!--內聯樣式CSS-->

效果：

數據：
linkCss:{
'color':'red',
'font-size':'20px'
},
（4）v-if,v-else,v-show 進行條件渲染

<a v-if="isPartA">partA</a> <!--條件渲染--> 如果是isPartA,則顯示partA
<a v-else>no data</a> 否則顯示no data
<!--<a v-show="!isPartA">partB</a>--> 否則顯示 partB
<button v-on:click="toggle">toggle</button>

效果：點擊toggle按鈕時，顯示partA

再次點擊toggle按鈕時，顯示no data


數據：
isPartA:true
}
},

methods : {
addItem () {
Vue.set(this.list,1,{
name: 'pineapple',
price:233
})
},

toggle(){
this.isPartA=!this.isPartA
}
}
</div>
</template>


<script>
/* eslint-disable */
import Vue from 'vue'
import Hello from './components/Hello'
import componeta from './components/a.vue'

export default {
components:{
componeta :componeta
},
data(){
return{
link: 'http://www.baidu.com',
classStr:'red-font',
className:{
'red-front':true,
'bule-front':true,
'yellow-front':false
},
classA: 'hello',
hasError:true,
linkCss:{
'color':'red',
'font-size':'20px'
},
isPartA:true
}
},

methods : {
addItem () {
/* this.list.push({
name:'pineapple',
price:100
})*/

Vue.set(this.list,1,{
name: 'pineapple',
price:233
})
},

toggle(){
this.isPartA=!this.isPartA
}
}

}
</script>

<!--樣式代碼-->
<style>
html {
height: 100%;
}
</style>

轉載于:https://www.cnblogs.com/shuaifing/p/7897015.html

總結

以上是生活随笔為你收集整理的vue.js的一些小语法v-bind,v-if,v-show,v-else的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。