目录
一、条件渲染
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>
运行结果 :
编辑
System.out.println("END-----------------------------------------------------------------------");
