vue的渲染

条件渲染

v-if、v-else

条件渲染，如果条件为真，则显示，否则不显示

div v-if="Math.random()<0.3">随机数小于0.3,所以我才会显示了呢</div>
<div v-else-if="Math.random()>=0.3 && Math.random()<0.6">0.3~0.6之间了。。到我显示了？</div>
<div v-else>随机数大于0.6哈哈，你们都不出来那我自己先出来了啊。。。</div>

注意：v-else一定是位于v-if 或者v-else-if之后，否则不会被识别。同理，v-else-if也必须位于v-if和v-else-if之后

v-show

这个命令同v-if一样，都可以用来控制元素的是否展示，不同的是使用v-show命令渲染的元素会始终DOM中，只是控制了元素的属性display。。。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
——-摘自Vue.js官网

列表渲染

v-for

v-for把一个数组对应为一个元素，v-for的指令格式为“item in items”,在v-for块中，我们拥有对父作用属性的完全权限访问。

<div v-for="(item,index) in items" v-if="index == 3">
            {{item.trr.a}}
        </div>
        <hr />
        <div v-for="(item,index) of items">
            <div v-if="index == 3">{{item.trr.a}}</div>
            {{item.trr}}
        </div>

data: {    
      items: [
           {trr: 'Monday'},
           {trr:'Tuesday'},
           {trr:'Wen'},
           {trr: {
               a: 'ss',
               b: 'dd',
               c: 'cc'
               }}
           ]
      },

图片效果显示

如上述代码所示，我们也可以用of 替代in,index为当前索引

对象的v-for

 <div v-for="obj in objs">{{obj}}</div>

data: {
    objs: {
           zero: '偷偷告诉你，我是一个数组哦！！',
           one: 'haha',
           two: 'xixi',
           three: '我是谁，我来自哪里？'
         },
}

从上述效果图可以，v-for遍历时，默认取得是value的值。

在使用v-for遍历对象时，可以使用第二个参数作为对象的键值。

   <div v-for="(value,key) in objs">{{key}}:{{value}}</div>

v-for在遍历对象时，还提供了第三个参数作为索引值

<div v-for="(value,key,index) in objs">
   我的索引值是第{{index}}个-----{{key}}:{{value}}
</div>

v-for与key的联合应用。

实际上key与v-for并不是特别有关联。理想的key值的项是有且唯一的id，使用v-bind绑定如下：

 <div v-for="item in items" :key="item.id"></div>

数组的更新检测
变异方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组（非变异方法）,会返回一个新数组

slice()
fliter()
concat()

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

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

Vue.set(vm.objs,'four','新添加的属性') //给objs这一对象中添加一个新的响应式属性
vm.$set(vm.objs,'five','另一个新添加的属性');

如果想为对象赋予多个属性时，可以使用Object.assign()和_.extend()方法。我们应该这样添加：

vm.objs = Object.assign({},vm.objs,{
            'aa': 20,
            'ss': 90
        })

显示数组的过滤和排序效果

 <div v-for="n in evenNumbers">{{ n }}</div>

data: {
       items: [
            {trr: 'Monday'},
            {trr:'Tuesday'},
            {trr:'Wen'},
            {trr: {
                    a: 'ss',
                    b: 'dd',
                    c: 'cc'
                }}
        ]
     },
            computed: {
                evenNumbers: function () {
                    return this.items.sort()
                }
            },

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

而如果存在嵌套的情况下，可以创建一个方法。。

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

关于v-for的一般取值

还可以取数字，表示多次重复

<div v-for="a in 4">ahhah</div>

谈谈v-for 和 v-if
当他们处于同一节点的时候，v-for的优先级比v-if的优先级要高。