vue中的指令

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

總結

以上是生活随笔為你收集整理的vue中的指令的全部內容，希望文章能夠幫你解決所遇到的問題。

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