条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值。语法如下：
v-show = "expression"
例子：
<!DOCTYPE html> <html lang="en"> <head> <title>v-show指令</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div> <h1 v-show="yes">Yes</h1> <h1 v-show="no">No</h1> <h1 v-show="age > 25">Age: {{age}}</h1> </div> <script> var app = new Vue({ el: '#app', data: { yes: true,//值为真 no: false,//值为假 age: 28 } }) </script> </body> </html>
运行截图：
v-else指令
可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中，取决于前面使用的是v-if还是v-show。若前面使用的是v-if，且v-if值为true，则v-else元素不会渲染；若前面使用的是v-show，且v-show值为true，则v-else元素仍会渲染到HTML。
v-for指令
循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：
v-for = "item in items"
例子：
在本例中，数组是todos，依次遍历数组todos中的每个元素，将text部分显示。
<!DOCTYPE html> <html lang="en"> <head> <title>v-for指令</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script> var app = new Vue({ el: '#app', data: { todos: [ {text: 'learn Javascript'}, {text: 'learn Vue'}, {text: 'learn ...'} ] } }) </script> </body> </html>
运行截图：
在浏览器控制台里Console，输入app.todos.push({text: 'new item'})，则会插入新的一条信息。
运行截图：
v-bind指令
给DOM绑定元素属性，语法如下：
v-bind:argument="expression"
其中，argument通常是HTML元素的特性，如：v-bind:class="expression"。
注：v-bind指令可以缩写为:冒号。如：:class="expression"。
例子：
在本例子中，当鼠标悬停在span标签的文字上时，会显示加载网页的时间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div> <span v-bind:title="message">Hover your mouse over me</span> </div> <script> var app = new Vue({ el: '#app', data: { message: 'you loaded this page on ' + new Date() } }) </script> </body> </html>
v-on指令
用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"。
注：v-on指令可以缩写为@符号。如：@click="doSth"。
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div> <p><input type="text" v-model="message"></p> <p> <button v-on:click="greet">Greet</button> </p> <p> <button v-on:click="say('hello vue')">Hello</button> </p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Greet to Vue' }, methods: { greet: function(){ alert(this.message); }, say: function(msg){ alert(msg); } } }) </script> </body> </html>
运行结果：
一个综合性例子