6.vue2-条件渲染v-if和列表循环v-for

Author: vanessa
Date: 2018/03/06

1.v-if语法：写在html标签内部，类似于标签属性

<div id="app">
    <div v-if="examType=='kzbs'">考证笔试</div>
    <div v-else-if="examType=='kzms'">考证面试</div>
    <div v-else-if="examType=='kbbs'">考编笔试</div>
    <div v-else>考编面试</div>
</div>
new Vue({
	el:'#app",
    data:{
		examType:"kzbs"
    }
})
//渲染后的页面显示:考证笔试

v-if 指令将根据表达式 seen 的值的真假来插入/移除 div标签

2.v-show语法：根据值为true/false控制div显示隐藏

<h1 v-show="ok">Hello!</h1>
new Vue({
	el:'#app",
    data:{
		ok:true
    }
})

3.v-for语法: 循环展示一个列表

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">
  <li v-for="(val,key) in fruits">{{name}}-{{key}}-{{val}}</li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: '水果',
    fruits:['apple','banana','orange'],
  }
})
页面显示：
水果-0-apple
水果-1-banana
水果-2-orange

ps：1.v-for优先级比v-if高，
2.v-for循环数组，2个参数对应的分别是（value,key）key是0123456的数字索引
3.v-for循环对象，3个参数对应的分别是（value, key, index）index是0123456的数字索引

4.数组变动注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
而应该用：

1.Vue.set(example1.items, indexOfItem, newValue)或example1.items.splice(indexOfItem, 1, newValue)
2.example1.items.splice(newLength)

5.对象更改检测注意事项

ps:一开始在vue实例中的data:{a:1}中定义过的属性会一直监听到，但是一开始未在data在添加是属性是监听不到的

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
1.添加对象属性用：

Vue.set(obj,key,value)或vm.$set(obj,key,value)

2.添加多个对象的属性

vm.userProfile = Object.assign({}, vm.userProfile, {
          age: 27,
          favoriteColor: 'Vue Green'
})