vue中的指令
阿新 • • 發佈：2017-09-17
spl 聲明 eve -o 兩種 list for lis 括號 一、聲明式渲染有兩種：
1.插值用兩個花括號如：{{內容}}
例子：html
<div id="app1">js:
<p>{{message}}</p>
</div>
var nv = new Vue({
el:‘#app1‘,
data:{
message:‘哈嘍！‘,
}
})
2.綁定數據如：v-bind:標簽屬性=“插入的內容”
html:
<div id="app2">
<span :title="message2">
鼠標懸停在這裏
</span>
</div>
var app2 = new Vue({
el:‘#app2‘,
data:{
message2:‘頁面加載於‘+ new Date().toLocaleString()
}
})
二、條件與循環
1.v-if="一個變量"，在data中用tru和false來判斷是否顯示
html:
<div id="app3">js:
<span v-if="seen">看見我</span>
</div>
var app3 = new Vue({
el:"#app3",
data:{
seen:true //用true和false來判斷能否看見內容
}
})v-for:指令可以綁定數組的數據來渲染一個項目列表如：
html:
<div id="app4">js:
<ul>
<li v-for="item in itemList">{{item}}</li>
</ul>
</div>
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>
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">js:
<span>{{message6}}</span>
<input type="text" v-model="message6">
</div>
var app = new Vue({
el:"#app6",
data:{
message6:‘數據雙向綁定‘
}
})
vue中的指令