Vue 条件渲染与列表渲染

一、条件渲染

1.简介 :

2.v-if实例 :

3.v-show实例 :

4.v-if与v-show的区别 :

二、列表渲染

1.基本用法 :

1.1 v-for遍历数组

1.2 v-for遍历对象

2.应用实例 :

一、条件渲染

1.简介 :

  (1) Vue提供了v-if 和 v-show条件指令来完成条件渲染/控制。

        v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染，也可以用v-else添加一个"else块"。

        PS : v-else和v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后，否则它们不会被识别。
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
(2) v-show指令是另一个用于根据条件展示元素的选项。eg:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。注意，v-show 不支持 <template> 元素，也不支持 v-else。

2.v-if实例 :

以“勾选复选框引起展示内容的变化”为例，vue_if.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-if demonstration</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><div id="app"><!--对checkbox类型的input标签使用v-model数据双向渲染，当checkbox被勾选时，point属性的值为true.--><input type="checkbox" v-model="point"/> 你是不是OP?<!--v-if会自动去挂载的Vue实例中的data数据池中寻找对应的属性。--><h2 v-if="point">👴就是OP怎么啦，怎么啦，op怎么你啦?</h2><h2 v-else>我才不是OP呢!</h2></div><script type="text/javascript">let vm = new Vue({el:"#app",data:{point:false,}})</script>
</body>
</html>

运行效果 : (如下GIF图)

3.v-show实例 :

仍然以“勾选复选框引起展示内容的变化”为例，vue_show.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-show demonstration</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app"><input type="checkbox" v-model="agreement"/> 你喜不喜欢吃好吃的?<h2 v-show="agreement">海星</h2><!--v-show不支持v-else--><h2 v-show="!agreement">喜欢不了一点</h2></div>
<script type="text/javascript">let vm = new Vue({el:"#app",data:{agreement:false,}})
</script>
</body>
</html>

运行效果 : (如下GIF图)

4.v-if与v-show的区别 :

(1) v-if会确保在切换过程中，条件块内的事件监听器和子组件真正地销毁和重建；而v-show机制相对简单，无论初始条件如何，条件块总是会被渲染并保留在DOM中，但只是对CSS样式的切换。
(2) 由于v-if会真正的销毁和重建组件，因此v-if开销更大。若组件需要频繁地切换，建议使用v-show；若运行时条件很少改变，可以考虑使用v-if条件渲染.

测试v-if条件渲染，在调试界面输出vm对象(创建的Vue实例)，可以在挂载到的元素的childNodes属性中，找到有且仅有一个h2标签。如下图所示 :

测试v-show条件渲染，在调试界面输出vm对象(创建的Vue实例)，可以在挂载到的元素的childNodes属性中，找到有两个h2标签。如下图所示 :

二、列表渲染

1.基本用法 :

1.1 v-for遍历数组

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组(位于data数据池中)，而 item 则是被迭代的数组元素的别名。（数组及数组元素的名称可以手动定义）
<ul id="example-1"><li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>
var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})

1.2 v-for遍历对象

也可以用 v-for 来遍历一个对象的 property（对象中定义的属性）；格式为——v-for="value in object"，该用法只可以取出property的值value。
<ul id="v-for-object" class="demo"><li v-for="value in object">{{ value }}</li>
</ul>
new Vue({el: '#v-for-object',data: {object: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}
})
若想同时遍历property的键名，需要提供第二个参数作为property的键名，如下 :
<div v-for="(value, name) in object">{{ name }}: {{ value }}
</div>
还可以用第三个参数作为索引（注意v-for格式中小括号的使用），如下 :
<div v-for="(value, name, index) in object">{{ index }}. {{ name }}: {{ value }}
</div>

2.应用实例 :

vue_for.html代码如下 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for demonstration</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><div id="app"><h3>(1) 渲染一个简单的无序列表(不是来自data数据池)</h3><ul><!-- 名称可以自主定义 --><li v-for="(i,index) in 3">第{{index}}个元素---{{i}}</li></ul><h3>(2) v-for迭代数组</h3><ul><li v-for="stu in students">{{stu}}</li></ul><h3>(3) v-for迭代对象</h3><ul><li v-for="(value,name,index) in blogger">{{index}} -- {{name}} -- {{value}}</li></ul></div><script type="text/javascript">let vm = new Vue({el: "#app",data: {students: [{id: 1, name: "Cyan", score: 450},{id: 2, name: "Eisen", score: 446},{id: 3, name: "Five", score: 439}],blogger: {name: "Cyan",symbol: "RA9",age: 21}}})</script>
</body>
</html>

运行结果 :