<meta charset="utf-8">
條件與循環(huán)
v-if
v-for
v-bind 指令將待辦項傳到循環(huán)輸出的每個組件中
v-bind
定義點擊事件·
v-on
通過使用 v-once 指令晾匠，你也能執(zhí)行一次性地插值茶袒，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新凉馆。但請留心這會影響到該節(jié)點上的其它數(shù)據(jù)綁定：
不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中薪寓。v-show 只是簡單地切換元素的 CSS 屬性 display
if 判斷 是否顯示
<div id ="app-3">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
<script>
var app3 =new Vue({
el:'#app-3',
data:{
seen:true
}
})
<colgroup><col style="width: 600px;"></colgroup>
|
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
|
<colgroup><col style="width: 600px;"></colgroup>
|
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個牛項目' }
]
}
})
|
Vue 中的變異方法
push(),pop(),shift(),unshift(),splice(),sort(),reverse()
<colgroup><col style="width: 600px;"></colgroup>
|
<a v-on:click.stop="doThis"></a>
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent></form>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
|
用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊澜共。
可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器向叉。
- .ctrl
- .alt
- .shift
- .meta
如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符：
<input v-model.number="age" type="number">
如果要自動過濾用戶輸入的首尾空白字符嗦董，可以給 v-model 添加 trim 修飾符：
