轉載請註明出處：王亟亟的大牛之路
按照國際慣例先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android
上禮拜有簡單提到v-if 和 v-for 沒有深入研究，這一篇就更詳細講講這倆指令（萬物講到底不就是“賦值“ “判斷“等等基礎行爲組成的麼）
v-if
之前就是寫了簡單的if行爲那麼有v-if就肯定有else。然後在2.1.0版本加入了v-else-if（暫時還沒找到類似於 java switch的東西，可能我學習的還不夠深入）
用法都差不多
<p v-if="message==='10086'">message===10086</p>
<p v-else-if="message==='10087'">message===10087</p>
<p v-else>message===10088</p>那我們把上次的例子改改看看效果
<template>
<div id="app2">
<p>{{ message }}</p>
<input v-model="message"></input>
<mycomponent></mycomponent>
<p v-if="message==='10086'">message===10086</p>
<p v-else-if="message==='10087'">message===10087</p>
<p v-else>message===10088</p>
</div>
</template>
<script>
import mycomponent from './component/mycomponent.vue'
export default {
name: 'app2',
data() {
return {
message: 'Hello Vue.js!'
}
},
components: {
mycomponent
}
}
</script>
<style>
</style>
效果如下
不輸入或者非10087 10086就都是10088,傳對象的某個屬性，傳boolean都行，反正就是判斷
key
vue對普通的元素變化只刷需要刷新的元素，所以性能相對較好，但是如果你就是要某個元素不復用也行，加個 key
像這樣
<div v-if="login === '10086'">
<label>10086</label>
<input placeholder="Enter 10086" key="10086-key">
</div>
<div v-else>
<label>10088</label>
<input placeholder="Enter10088" key="10088-key">
</div>在這種情況下用戶的輸入每次都會被重置，默認情況沒有刷新的ui是會被複用的，諸如用戶輸入內容是會被保留的
v-show
v-show和v-if用起來沒什麼差異，但是後者永遠都會被渲染然後在DOM，只是有時候你看不到而已（類似於 Android View.GONE和View.INVISIBLE）
那麼使用場景有何差異？（官方扣來的，講的很直白，看了就懂）
v-show 不支持 語法，也不支持 v-else。
v-for
正如上次說的 在v-for指令操作裏 a in b是必要格式
b是數據源的key b是item內容的引用
那有小夥會問了，我能得到確切item的“position“麼？
答案是：可以，官方給了個類似索引的東西，像這樣
<template>
<div>
<ul id="app2">
<li v-for="(a, index) in b">
{{ parentMessage }} - {{ index }} - {{ a.message }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app2',
data() {
return {
a: [
{ message: 'haha' },
{ message: 'hehe' }
],
parentMessage: 'Parent'
}
},
components: {
mycomponent
}
}
</script>上面提到了in 還可以用of 也就是 a of b,也能達到類似效果
v-for遍歷對象
v-for不僅可以遍歷數組，也可以遍歷對象，像這樣
<template>
<div id="app2">
<ul id="for-list" class="wjjtest">
<li v-for="obj in people">
{{ obj }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app2',
data() {
return {
people:{
name:'wjj',
age:26,
address:'shanghai'
}
}
}
}
</script>
<style>
</style>
效果：
索引的概念在這裏依舊有效,例子就不寫了
整數迭代循環
python有自增循環諸如0-5，像這樣
for i in range(0,5):
print '第'+i;vue也有類似行爲像這樣
<div>
<span v-for="n in 5">第{{ n }}</span>
</div>v-for的key
v-for也有key的概念，需要使用v-bind:key來綁定一個屬性。
顯示過濾/排序結果
上面的 a in b 多半是傳入對象或者數組，還可以穿入一個函數，這樣我們的有些篩選邏輯就不用做在對象裏（雖然篩選對象和寫一個篩選方法差距有時候就是一個賦值行爲，但是可以更好的抽象）
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
過濾方法用 computed或者method都行，看你個人喜好了
小例子：
app.vue
<template>
<div id="app2">
<input v-model="tempstring" v-on:keyup.enter="addNewTodo" placeholder="add item">
<ul>
<p is="mycomponent" v-for="(todo, index) in todos" v-bind:title="todo+' index:'+index" v-on:remove="todos.splice(index, 1)"></p>
</ul>
</div>
</template>
<script>
import mycomponent from './component/mycomponent.vue'
export default {
name: 'app2',
data() {
return {
tempstring: '',
todos: [
'father ',
'father ',
'father '
]
}
},
components: {
mycomponent
},
methods: {
addNewTodo: function() {
this.todos.push(this.tempstring)
this.newTodoText = ''
}
}
}
</script>
<style>
</style>
mycomponent.vue
<template>
<div id="mycomponent">
{{sonstring}} : {{ title }}
<button v-on:click="$emit('remove')">delete</button>
</div>
</template>
<script type="text/javascript">
export default {
name: 'app2',
data() {
return {
sonstring:"mycomponent part"
}
},
props: ['title']
}
</script>
<style>
</style>
1.props控件間傳遞參數
2.$emit響應事件給父控件
相關具體知識點會在之後的文章詳細講述
這一篇把官方文檔裏我覺得比較care的知識點再回溫了下，官方提供的這些功能已經足夠應對我們的日常使用了，更多功能和知識點可以看
https://cn.vuejs.org/v2/api/#v-for
謝謝觀衆老爺們能看到這裏！
