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
// 條件與循環==>條件 v-if=""
let app3 = new Vue({
el: '#app3',
data: {
seen: true
},
methods: { //這里使用了方法,
change: function (event) {
this.seen = this.seen? false : true
}
}
})
- 要求的效果是點擊按鈕切換是否渲染
- 這里不是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語法<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> -
使用 key 控制元素的可重用
- **注意: **Vue 嘗試盡可能高效的渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 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>
- 兩個模版由于使用了相同的元素 `<label>,<input>`, 則 `<input>` 會被復用，但是在 `input` 輸入的內容在從用戶名登陸切換成郵箱登陸頁面時仍然在輸入框中,
- 我們要求切換后 `input` 也是空的, 可以使用 `key` 作為 **唯一值** 標示.
```
<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>
```
- 這樣有了唯一標示 `key`, 就會從新渲染 `input`
- `label`沒有標示, 所以不會從新渲染
2: v-show 以及與 v-if 的區別
<h1 v-show="ok">Hello!</h1>
-
v-show條件性顯示或隱藏, -
v-show的元素會始終渲染并保持在DOM中。v-show是簡單的切換元素的CSS屬性display -
v-show不支持template
2-1: v-show 與 v-if 的區別
v-if是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件。
-
v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。 -
v-if支持template,v-show不支持 - 相比之下，
v-show簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。 -
一般來說，
v-if有更高的切換消耗而v-show有更高的初始渲染消耗。因此，如果需要頻繁切換使用v-show較好，如果在運行時條件不大可能改變則使用v-if較好。
3: v-for 循環
我認為它類似 for...in... 循環遍歷
格式:
- v-for 指令根據一組數組的選項列表進行渲染。
//todos 數組的選項列表
let app4 = new Vue({
el: '#app4',
data: {
message: '',
todos: [
{text: '被遍歷的數據(數組), 寫在vue.js格式的data中'},
{text: '還可以在寫一個添加方法'},
{text: '或者刪除'},
{text: '本頁其實都可以全部這樣生成'},
],
}
})
- v-for 指令需要以 item in items 形式的特殊語法， items (就是上面代碼的todos)是源數據數組并且 item (下面代碼的todo) 是數組元素迭代的別名。
<div class="item">
<p>v-for="條件" 指令</p>
<div id="app4">
<!-- <button v-on:click="change()">for循環</button> -->
<ol>
<li><p>類似for..in函數, todo遍歷data下的todos數組,</p></li>
<li><p>然后把遍歷出來的單元賦值todo, 在使用todo.text把的text的值調出來</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>
一個簡單的 todoList 貼個完整的代碼:
//html
<div class="item">
<p>v-for="條件" 指令</p>
<div id="app4">
<!-- <button v-on:click="change()">for循環</button> -->
<ol>
<li><p>類似for..in函數, todo遍歷data下的todos數組,</p></li>
<li><p>然后把遍歷出來的單元賦值todo, 在使用todo.text把的text的值調出來</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: '被遍歷的數據(數組), 寫在vue.js格式的data中'},
{text: '還可以在寫一個添加方法'},
{text: '或者刪除'},
{text: '本頁其實都可以全部這樣生成'},
],
},
//添加todo事件
methods: {
send:function (mes) {
let obj = {text: mes}
this.todos.push(obj);
this.message = '';
}
}
})
- 這里有 v-model數據雙向綁定, 暫時在這里先不說
3-1: v-for="(item, index) in items", v-for的第二個屬性 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' }
]
}
})
結果
- Parent - 0 - Foo
- Parent - 1 - Bar
3-2: v-for= "(value , key, index) in object" 還可以遍歷一個對象 及對對象的遍歷, 對對方法的遍歷, 對對整數的遍歷
對一個對象的遍歷, 除了可以遍歷出來值(value) 還有鍵(key) 和 索引(index)
//html
//對對象的遍歷, 對方法的遍歷, 對整數的遍歷
<div class="item">
<p>3-1: v-for="條件"循環中加入方法 指令</p>
<div id="app5">
<ol>
<li v-for="n in filterNumber(numbers)"> {{n}}</li>
</ol>
<p>對對象的遍歷</p>
<ul>
<li v-for="(value, key, index) in obj">
'key' - {{key}} - 'value' - {{value}} - 'index' -{{index}}
</li>
</ul>
<p>對整數的遍歷</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: {
'這是對': '對象',
'的': '遍歷',
'你看看': '好使不'
}
},
methods: {
filterNumber: function () {
return this.numbers.filter((item) => {
return item % 2 === 0;
})
}
}
})
