v-if和v-else是一对离不开的好兄弟，使用条件运算符判断时常用。需要说明的是，v-if可以单独使用，但是v-else的前面必须要有一个v-if的条件或者v-show指令（后面介绍），这个和我们编程的原理是一样一样的。
它们作为条件渲染指令，他们的基础语法如下：
v-if="expression",v-else;
注意这里的v-else可以不写，expression表达式是一个返回bool类型的属性或者表达式。
<body> <div> <h1>姓名：<label v-text="Name"></label></h1> <h1>是否已婚：<span v-if="IsMarry">是</span></h1> <h1>大人or小孩：<span v-if="Age>18">大人</span><span v-else>小屁孩</span></h1> <h1>学校：{{ School }}</h1> </div> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', IsMarry: true, Age: 20, School:'光明小学', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
得到结果：
只有有一点编程基础，上述应该不难看懂。
4、v-show指令
v-show指令表示根据表达式之bool值，觉得是否显示该元素。需要说明的是，如果bool值false，对应的Dom标签还是会渲染到页面上面，只是将该标签的css属性display设为none而已。而如果你用v-if值，bool值为false的时候整个dom树都不被渲染到页面上面。从这点上来说看，如果你的需求是需要经常切换元素的显示和隐藏，使用v-show效率更高，而如果你只做一次条件判断，使用v-if更加合适。
v-show还常和v-else一起使用，表示如果v-show条件满足，则显示当前标签，否则显示v-else标签。
<body> <div> <h1>姓名：<label v-text="Name"></label></h1> <h1>是否已婚：<span v-show="IsMarry">是</span></h1> <h1>学校：{{ School }}</h1> </div> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', IsMarry: false, Age: 16, School:'光明小学', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body>
得到效果：
5、v-for指令
v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。
最简单的例子：
<body> <div> <ul> <li v-for="value in nums">{{value}}</li> </ul> </div> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //ViewModel var vue = new Vue({ el: '#app', data: { nums: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }); </script> </body>
效果：
除了基础数据之外，还支持Json数组的绑定。比如：
<div> <ul> <li v-for="value in values">姓名：{{value.Name}}，年龄：{{value.Age}}</li> </ul> </div> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //ViewModel var vue = new Vue({ el: '#app', data: { values: [{ Name: "小明", Age: 20 }, { Name: "小刚", Age: 18 }, { Name: "小红", Age: 16 }] } }); </script>
效果：
在v-for里面，可以使用<template> 标签来渲染多个元素块，下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。