vue中的指令

一、聲明式渲染有兩種：1.插值用兩個(gè)花括號(hào)如：{{內(nèi)容}}例子：html<div id="app1">
<p>{{message}}</p>
</div>js:var nv = new Vue({
el:'#app1',
data:{
message:'哈嘍！',
}
})2.綁定數(shù)據(jù)如：v-bind:標(biāo)簽屬性=“插入的內(nèi)容”html:<div id="app2">
<span :title="message2">
鼠標(biāo)懸停在這里
</span>
</div>js:var app2 = new Vue({
el:'#app2',
data:{
message2:'頁(yè)面加載于'+ new Date().toLocaleString()
}
})二、條件與循環(huán)1.v-if="一個(gè)變量"，在data中用tru和false來(lái)判斷是否顯示html:<div id="app3">
<span v-if="seen">看見(jiàn)我</span>
</div>js:var app3 = new Vue({
el:"#app3",
data:{
seen:true //用true和false來(lái)判斷能否看見(jiàn)內(nèi)容
}
})2.v-for:指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表如：html:<div id="app4">
<ul>
<li v-for="item in itemList">{{item}}</li>
</ul>
</div>js:var app4 = new Vue({
el:"#app4",
data:{
itemList:['第一項(xiàng)','第二項(xiàng)','第三項(xiàng)']
}
})三、處理用戶輸入1.v-on?指令綁定一個(gè)事件監(jiān)聽(tīng)器?html:<div id="app5">
<span >{{message5}}</span>
<button v-on:click="news">點(diǎn)擊扭轉(zhuǎn)</button>
</div>js:var app5 = new Vue({
el:'#app5',
data:{
message5:'hello vue!'
},
methods:{
news:function(){
this.message5 = this.message5.split('').reverse().join('')
}
}
})2.數(shù)據(jù)雙向綁定html<div id="app6">
<span>{{message6}}</span>
<input type="text" v-model="message6">
</div>js:var app = new Vue({
el:"#app6",
data:{
message6:'數(shù)據(jù)雙向綁定'
}
})

總結(jié)

以上是生活随笔為你收集整理的vue中的指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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