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 id="app">
<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 id="app">
<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”。
