知識(shí)點(diǎn)：

???? v-bind 動(dòng)態(tài)綁定標(biāo)簽屬性

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

???? 使用v-bind 綁定class和內(nèi)聯(lián)樣式

???? 使用v-if,v-show,v-else進(jìn)行條件渲染

?

<template>
<div>
(1) v-bind a標(biāo)簽跳轉(zhuǎn)頁面

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

效果：

數(shù)據(jù)：


link的值，為跳轉(zhuǎn)的地址 http://www.baidu.com


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

數(shù)據(jù)：
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為一個(gè)集合，classA是一個(gè)變量，asError也是一個(gè)變量--> 效果：

數(shù)據(jù)：

classA: 'hello',
hasError:true,

（3）v-bind 綁定內(nèi)聯(lián)樣式CSS

<a class="link-href" :style="linkCss">to baidu3333</a> <!--內(nèi)聯(lián)樣式CSS-->

效果：

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

<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>

效果：點(diǎn)擊toggle按鈕時(shí)，顯示partA

再次點(diǎn)擊toggle按鈕時(shí)，顯示no data


數(shù)據(jù)：
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>

轉(zhuǎn)載于:https://www.cnblogs.com/shuaifing/p/7897015.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。