gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson02
一 用v-if显示单个元素
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <div id="app1"> <h1 v-if="isShow">显示1</h1> <!--if--else--单个元素--> <h1 v-else>显示2</h1> </div> </body> <script src="../js/vue.min.js"></script> <script> var vm = new Vue({ el:'#app1', data:{ isShow:false } }); </script> </html>
输出结果：显示2
二 v-if显示多个元素需配合<template>
v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则将不会被识别。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index2</title> </head> <body> <div id="app2"> <template v-if="isShow"> <!--if...else... 用template实现多个元素--> <div>显示1</div> <div>显示2</div> <div>显示3</div> <div>显示4</div> </template> <div> 显示5 </div> </div> </body> <script src="../js/vue.min.js"></script> <script> var vm = new Vue({ el:'#app2', data:{ isShow:true } }); </script> </html>
输出结果：显示1、显示2、显示3、显示4
三 v-show用于条件展示元素
不同的是带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单的切换元素的CSS属性display.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index4</title> </head> <body> <div id="app4"> <div v-show="isShow"> <!--注意：v-show不支持<template>元素，也不支持v-else--> 显示文本 </div> </div> </body> <script src="../js/vue.min.js"></script> <script> var vm = new Vue({ el:'#app4', data:{ isShow:true //切换isShow的值（布尔值） } }); </script> </html>
输出结果：显示文本
四 v-if和v-show的区别
(1)v-if是真实的渲染与卸载,只不过第一次渲染后,会将结果缓存一下
(2)v-show元素始终被编译并保留，只是简单地基于 CSS 切换
(3)总结: 如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好