v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：
<div> <p v-if="greeting">Hello!</p> </div> <script type="text/javascript"> var exampleVM2 = new Vue({ el: '#example-2', data: { greeting: true } }) </script>
由于v-if是一个指令，需要将它添加到一个元素上。但是如果想要切换多个元素，则可以把<template>元素当做包装元素，并在其上使用v-if，最终的渲染结果不会包含它。代码如下：
<div> <template v-if="greeting"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 1</p> </template> </div> <script type="text/javascript"> var exampleVM2 = new Vue({ el: '#example-2', data: { greeting: true } }) </script>
v-show
v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏。查看DOM时，会发现元素上多了一个内联样式style="display:none"。
如图所示：
注：v-show不支持<template>语法。
一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。
v-else
v-else就是JavaScript中的else的意思，它必须跟着v-if或者v-show使用。如下代码：
<div> <P v-if="ok">我是对的</P> <p v-else="ok">我是错的</p> </div> <script type="text/javascript"> var exampleVM2 = new Vue({ el: '#example', data: { ok: false } }) </script>
将v-show用在组件上时，因为指令的优先级v-else会出现问题，所以不要这样做。我们可用用另一个v-show替换v-else。
v-model
v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。代码如下：
<div> <form> 姓名： <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别： <input type="radio" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份： <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> </div> <script type="text/javascript"> new Vue({ el: '#example', data: { data:{ name:'', sex:'', interest:[], identity:'' } } }) </script>
除了以上用法，在v-model指令后面还可以添加多个参数（number、lazy、debounce）。
1.number
如果想要用户的输入自动转换为Number类型（如果原值的转换结果为NAN，则返回原值），则可以添加一个number特性。
2.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。代码如下：
<div> <input v-model="msg" lazy/><br/> {{msg}} </div> <script type="text/javascript"> new Vue({ el: '#example', data: { msg:'内容是在change事件后才改变的~' }, watch:{ } }) </script>
3.debounce
设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送ajax请求），那么它较为有用。
<input v-model="msg" debounce="5000"/>
v-repeat
v-repeat（已经废除）指令基于源数据重复渲染元素。可以使用$index来呈现相对应的数组索引。不细讲。
数组变动检测
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
example1.items.push({ message: 'Baz' }); example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/); });
vue.js还增加了两个方法来观测变化：$set、$remove。
我们应该尽量避免直接设置数据绑定的数组元素，因为这些变化不会被vue.js检测到，因而也不会更新视图渲染。可以使用$set方法：
demo.items.$set(0,{childMsg:'Changed!'})
$remove是$splice的语法糖，用于从目标数组中查找并删除元素：
demo.items.$remove(0);