1: v-if條件
//html
<div class="item">
<p>v-if="條件" 指令</p>
<div id="app3">
<button v-on:click="change()">if條件</button>
<span v-if="seen">看到我了, 說明你使用的是v-if條件指令seen為{{seen}}</span>
</div>
</div>
//js
// 條件與循環(huán)==>條件 v-if=""
let app3 = new Vue({
el: '#app3',
data: {
seen: true
},
methods: { //這里使用了方法,
change: function (event) {
this.seen = this.seen? false : true
}
}
})
- 要求的效果是點(diǎn)擊按鈕切換是否渲染
- 這里不是display: none或者block的切換, 這是代碼塊是否渲染的問題
- 顯示隱藏使用 v-show
1-1: v-if ... v-else 以及 v-esle-if
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
// v-if... v-else v-esle-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- 不同條件渲染不同的元素
-
且支持
template語(yǔ)法<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> -
使用 key 控制元素的可重用
- **注意: **Vue 嘗試盡可能高效的渲染元素睬涧，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做除了使 Vue 更快之外還可以得到一些好處, 例如:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
- 兩個(gè)模版由于使用了相同的元素 `<label>,<input>`, 則 `<input>` 會(huì)被復(fù)用掉冶，但是在 `input` 輸入的內(nèi)容在從用戶名登陸切換成郵箱登陸頁(yè)面時(shí)仍然在輸入框中,
- 我們要求切換后 `input` 也是空的, 可以使用 `key` 作為 **唯一值** 標(biāo)示.
```
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
```
- 這樣有了唯一標(biāo)示 `key`, 就會(huì)從新渲染 `input`
- `label`沒有標(biāo)示, 所以不會(huì)從新渲染
2: v-show 以及與 v-if 的區(qū)別
<h1 v-show="ok">Hello!</h1>
-
v-show條件性顯示或隱藏, -
v-show的元素會(huì)始終渲染并保持在DOM中刀脏。v-show是簡(jiǎn)單的切換元素的CSS屬性display -
v-show不支持template
2-1: v-show 與 v-if 的區(qū)別
v-if是真實(shí)的條件渲染宛裕，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
-
v-if也是惰性的：如果在初始渲染時(shí)條件為假畜埋，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來）欺矫。 -
v-if支持template,v-show不支持 - 相比之下，
v-show簡(jiǎn)單得多——元素始終被編譯并保留篮奄，只是簡(jiǎn)單地基于 CSS 切換捆愁。 -
一般來說割去，
v-if有更高的切換消耗而v-show有更高的初始渲染消耗窟却。因此，如果需要頻繁切換使用v-show較好呻逆，如果在運(yùn)行時(shí)條件不大可能改變則使用v-if較好夸赫。
3: v-for 循環(huán)
我認(rèn)為它類似 for...in... 循環(huán)遍歷
格式:
- v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。
//todos 數(shù)組的選項(xiàng)列表
let app4 = new Vue({
el: '#app4',
data: {
message: '',
todos: [
{text: '被遍歷的數(shù)據(jù)(數(shù)組), 寫在vue.js格式的data中'},
{text: '還可以在寫一個(gè)添加方法'},
{text: '或者刪除'},
{text: '本頁(yè)其實(shí)都可以全部這樣生成'},
],
}
})
- v-for 指令需要以 item in items 形式的特殊語(yǔ)法咖城， items (就是上面代碼的todos)是源數(shù)據(jù)數(shù)組并且 item (下面代碼的todo) 是數(shù)組元素迭代的別名茬腿。
<div class="item">
<p>v-for="條件" 指令</p>
<div id="app4">
<!-- <button v-on:click="change()">for循環(huán)</button> -->
<ol>
<li><p>類似for..in函數(shù), todo遍歷data下的todos數(shù)組,</p></li>
<li><p>然后把遍歷出來的單元賦值todo, 在使用todo.text把的text的值調(diào)出來</p></li>
<li v-for="todo in todos"> // item in items的格式
{{todo.text}}
</li>
</ol>
<div>
<input type="text" v-model="message" placeholder="輸入下試試"> <button v-on:click="send(message)">添加</button>
<p>{{message}}</p>
</div>
</div>
</div>
一個(gè)簡(jiǎn)單的 todoList 貼個(gè)完整的代碼:
//html
<div class="item">
<p>v-for="條件" 指令</p>
<div id="app4">
<!-- <button v-on:click="change()">for循環(huán)</button> -->
<ol>
<li><p>類似for..in函數(shù), todo遍歷data下的todos數(shù)組,</p></li>
<li><p>然后把遍歷出來的單元賦值todo, 在使用todo.text把的text的值調(diào)出來</p></li>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
<div>
<input type="text" v-model="message" placeholder="輸入下試試">
<button v-on:click="send(message)">添加</button>
<p>{{message}}</p>
</div>
</div>
</div>
//js
let app4 = new Vue({
el: '#app4',
data: {
message: '',
todos: [
{text: '被遍歷的數(shù)據(jù)(數(shù)組), 寫在vue.js格式的data中'},
{text: '還可以在寫一個(gè)添加方法'},
{text: '或者刪除'},
{text: '本頁(yè)其實(shí)都可以全部這樣生成'},
],
},
//添加todo事件
methods: {
send:function (mes) {
let obj = {text: mes}
this.todos.push(obj);
this.message = '';
}
}
})
- 這里有 v-model數(shù)據(jù)雙向綁定, 暫時(shí)在這里先不說
3-1: v-for="(item, index) in items", v-for的第二個(gè)屬性 index
//html
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
//js
var example2 = new Vue({
el: '#example-2',
data : {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
結(jié)果
- Parent - 0 - Foo
- Parent - 1 - Bar
3-2: v-for= "(value , key, index) in object" 還可以遍歷一個(gè)對(duì)象 及對(duì)對(duì)象的遍歷, 對(duì)對(duì)方法的遍歷, 對(duì)對(duì)整數(shù)的遍歷
對(duì)一個(gè)對(duì)象的遍歷, 除了可以遍歷出來值(value) 還有鍵(key) 和 索引(index)
//html
//對(duì)對(duì)象的遍歷, 對(duì)方法的遍歷, 對(duì)整數(shù)的遍歷
<div class="item">
<p>3-1: v-for="條件"循環(huán)中加入方法 指令</p>
<div id="app5">
<ol>
<li v-for="n in filterNumber(numbers)"> {{n}}</li>
</ol>
<p>對(duì)對(duì)象的遍歷</p>
<ul>
<li v-for="(value, key, index) in obj">
'key' - {{key}} - 'value' - {{value}} - 'index' -{{index}}
</li>
</ul>
<p>對(duì)整數(shù)的遍歷</p>
<ul>
<li v-for="n in 10">{{n}}</li>
</ul>
</div>
</div>
//js
let app5 = new Vue({
el: '#app5',
data: {
numbers: [1, 2, 3, 4, 5, 6, 7, 8],
obj: {
'這是對(duì)': '對(duì)象',
'的': '遍歷',
'你看看': '好使不'
}
},
methods: {
filterNumber: function () {
return this.numbers.filter((item) => {
return item % 2 === 0;
})
}
}
})
