vue.js v-if和v-for那些事(小例子提一提props)
转载请注明出处：王亟亟的大牛之路
按照国际惯例先安利：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的东西，可能我学习的还不够深入）
用法都差不多
if="message==='10086'">message===10086
else-if="message==='10087'">message===10087
else>message===10088
那我们把上次的例子改改看看效果
<template>
<div id="app2">
<p>{{ message }}p>
<input v-model="message">input>
<mycomponent>mycomponent>
<p v-if="message==='10086'">message===10086p>
<p v-else-if="message==='10087'">message===10087p>
<p v-else>message===10088p>
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>10086label>
<input placeholder="Enter 10086" key="10086-key">
div>
<div v-else>
<label>10088label>
<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 多半是传入对象或者数组，还可以穿入一个函数，这样我们的有些筛选逻辑就不用做在对象里（虽然筛选对象和写一个筛选方法差距有时候就是一个赋值行为，但是可以更好的抽象）
for="n in evenNumbers">{{ n }}
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')">deletebutton>
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
谢谢观众老爷们能看到这里！
