Vue：条件/列表渲染：v-if-else / v-show / v-for

当前系列： Vue.js

实际上就是分支循环，easy得飞起……

条件渲染（v-if-else）

通过指令v-if指定某个html元素是否显示：

<a v-if="isAuthor">修改</a>

isAuthor定义在data中：

data: {
    isAuthor: true
}

如果isAuthor为truthy，被定义的a标签被渲染；否则不被渲染。

演示：a标签应放置在Vue实例指定的模板中……

有了if，当然少不了v-else：

<span v-else>你无权修改</span>

从2.1.0开始，还可以v-else-if

<a v-else-if="isAdmin">删除</a>

注意：if...else之间不能有其他内容

为什么强调“渲染”？

因为还有一个指令：v-show，它才是控制“显示”的：

<a v-show="isAuthor">修改</a>

它总是渲染出这个a标签，并且给它加一display的style，这样来控制元素的显示与否：

<a style="display: none;">修改</a>

F12演示：v-show和v-if在页面呈现上的不同

@想一想@：如何选择使用 v-show 还是 v-if 呢？

v-show不能配合v-else使用
频繁显示/隐藏的：v-show，因为它只改style

列表渲染

类似于循环。

遍历数组元素

先准备数据：

data: {
    students:['夏康平','陈国栋', '韩佳宝']   //数组
}

然后在要循环显示的html元素上使用v-for：

<li v-for="student in students">{{'欢迎新同学：'+student}}</li>

for...in套用了ES5中属性迭代的写法（也可以写成for...of），student代表数组中单个的元素。

还可以很方便的获得数组元素的下标：

<li v-for="(student,index) in students">
    <!--注意：多个{{}}的使用-->
    {{index+1}}-{{'欢迎新同学：'+student}}
</li>

数组中的元素还可以是对象：

data: {
    students: [
        { id: 8, name: '夏康平' },
        { id: 12, name: '陈国栋' }
    ]
}

<li v-for="student of students">
    {{'欢迎新同学'+student.id+':'+student.name}}
</li>

遍历对象的属性

vue data中直接存放一个对象：

data: {
    student: { id: 8, name: '夏康平' }
}

遍历对象的属性：

<li v-for="prop in student">
    {{prop}}
</li>

默认给的是对象属性的值。也可以添加属性的名称：

<li v-for="(prop,key) in student">
    {{key}}：{{prop}}
</li>

甚至还可以再加上属性的索引（index）：

<li v-for="(prop,key,i) in student">
    [{{i}}]{{key}}：{{prop}}
</li>

嵌套遍历

比如说我们vue data里面的数组是不规律的（由不同类型对象组成）：

data: {
    students: [
        { id: 8, name: '夏康平' },
        { id: 12, score: 98 },
        {name: '韩佳宝', from:'黑龙江'}
    ]
}

能不能把他们各自的属性依次取出来呢？

<p v-for="student of students">
    <span v-for="value in student">{{value}}；</span>
</p>

监听变化

如果我们用赋值的方式直接改变数组元素（不是数组本身），Vue实例不能响应式的渲染列表。

F12控制台对比演示：

vm.students = ['飞哥', '小鱼']    //重新赋值
vm.students[0] = '飞哥'    //改变数组元素

但是，如果我们使用JavaScript中定义的能直接变更当前数组的方法，Vue就能够侦听。

vm.students.shift()
vm.students.unshift('邹丽')

所以，如果要替换的数组中某个元素的话：

vm.students.splice(1,1,'大飞哥')

如果数组方法是返回一个新数组，而不是改变当前数组的，需要用到赋值：

vm.students = vm.students.concat('飞哥')

另外，无论是数组自身变化，还是被重新赋值：

Vue都会智能的采用“就地复用”的策略，只就变化部分进行替换，尽可能的降低重新渲染的开销。

PPT动画演示：

这样做，大部分时候都没问题；但有时候会有问题（说明/代码演示等：在学习form表单绑定之后）

混合使用v-for和v-if

一般来说，都是在列表项中过滤（不渲染显示）某些项。比如，只显示数组索引号大于1的项：

@试一试@：是这样的么？

<p v-for="(student,i) of students" >
    <span v-if="i>1">{{i}}</span>: {{student}}
</p>

@想一想@：为什么？

正确的写法是：

<p v-for="(student,i) of students" v-if="i>1">
        <span>{{i}}</span>: {{student}}
</p>

但是，Vue并不推荐在同一个元素上同时使用v-if和v-for，为什么呢？（常见面试题）

首先，v-for的优先级比v-if更高。@想一想@：不这样的话……
所以，按上述写法，当（因vue data数组发生变化）需要响应式的重新渲染时，哪怕满足渲染/呈现条件的列表项没有发生变化，Vue都会重新遍历数组进行渲染

PS：前端框架一般都很抠性能，因为当页面复杂之后，浏览器的性能负担还是比较重的。

推荐的方式：

如果v-if决定的是整个列表是否呈现，先v-if，再v-for
如果v-if只是决定具体某个列表项是否呈现（过滤），使用计算属性

作业

根据当前用户（纯前端vue data模拟，全栈cookie中读取）
1. 是否已登录
2. 是否为管理员
现实不同的导航栏状态
在内容单页中，通过控制台更改数据，实现：
1. 评论部分
  1. 如果用户已登录，显示评论的多行文本框
  2. 否则，显示提示信息和登录/注册链接
2. 修改/举报/处理
  1. 如果当前用户是文章作者，显示修改链接
  2. 如果当前用户是不是文章作者，显示举报链接
  3. 但如果当前用户是管理员，显示处理链接
用列表渲染出（暂时忽略v-if和v-for不应同时作用于一个元素的要求）：
1. 免费广告列表（vue data中的数据是广告文本/url等信息）：含根据位置（数组索引）确定的1/2/3的图标颜色样式
2. 评论列表：含评论的回复（要细讲id和楼层的区别）