Vue-if-for｜undefined

v-if

基本使用

1 2	<p v-if='ok'>yes</p> <p v-else>no</p>

在

1
2
3

<template v-if='ok'>
    <h1>Title</h1>
</template>

v-else

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-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>

使用key管理可复用的元素

v-show

1	<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

//注意，v-show 不支持

v-if vs v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-if 与 v-for嵌套使用

列表渲染

基本用法已经记录过

v-for遍历对象

<div id='app'>
    <p v-for="(key,val) in list">{{key}}:{{val}}</p>
 </div>

 ---js----
  var app = new Vue({
    el:'#app',
    data:{
        list:[
            name:'wj',
            age:12,
            guo:'china'
        ]
    }
  })

数组检测更新

Vue中包含观察数组的方法这组方法操作数组后会触发视图的更新
变异方法

push() //尾部添加
pop() //尾部删除
shift() //头部添加
unshift() //头部删除
splice() //剪切
sort() //排序
reverse() //反转
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组

非变异方法
filter(), concat() 和 slice() 。
这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

//将返回的数组  赋值给变量
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引改变一个数组的值的时候无法检测数组发生变化 vm.items[indexOfItem] = newValue
当你修改数组长度的时候无法检测 vm.items.length = newLength

为了解决以上两种问题一下两种方式都能实现上诉的问题

vm.items.length = newLength
//Vue.set  代替上诉实现
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)

vm.items.length = newLength
//替代的方法
example1.items.splice(newLength)

对象检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
Vue.set(vm.userProfile, 'age', 27)
//你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
this.$set(this.userProfile, 'age', 27)

v-if
1. v-if vs v-show
列表渲染
数组检测更新