1 条件判断
1.1 普通if
条件判断使用v-if指令：
<div id="app">
<p v-if="seen">看到了</p>;
</div>
<script>
new Vue({
el:'#app',
data:{
seen:true
}
})
</script>
v-if指令根据表达式的值（在这里是seen）决定是否插入<p>
1.2 if-else
可以使用v-else添加一个else块：
<div id="app">
<div v-if="Math.random()>0.5">1</div>
<div v-else>2</div>
</div>
<script>
new Vue({
el:'#app'
})
</sctipt>
也可以增加v-else-if：
<div id="app">
<div v-if="value === 'A'">A</div>
<div v-else-if="value === 'B'">B</div>
<div v-else-if="value === 'C'">C</div>
<div v-else>D</div>
</div>
<script>
new Vue({
el:'#app',
data:{
value:'A'
}
})
</script>
v-else以及v-else-if必须跟在v-if或者v-else-if之后。
1.3 v-show
也可以根据v-show展示元素：
<div id="app">
<h1 v-show="ok">Test</h1>
</div>
<script>
new Vue({
el:'#app',
data:
{
ok:true
}
})
</script>
2 循环
循环使用v-for，格式为：A in B，其中A是B中的每一个值，若B为数组，则A表示其中的没一个元素，若B为对象，则A可以表示B中的没一个值，通常配合<li>使用：
<div id="app">
<ol>
<li v-for="i in arr">{{i.value}}</li>
</ol>
</div>
<script>
new Vue({
el:'#app',
data:
{
arr:
[
{value:'value1'},
{value:'value2'},
{value:'value3'}
]
}
})
</script>
另外也可以通过一个对象的属性来迭代数据：
<div id="app">
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:
{
obj:
{
value1:'value1',
value2:'value2',
value3:'value3'
}
}
})
</script>
也可以提供第二个参数作为键名：
<li v-for="(value,key) in obj">
{{key}} -> {{value}}
</li>
第三个参数作为索引：
<li v-for="(value,key,index) in obj">
{{index}} : {{key}} -> {{value}}
</li>
另外也可以迭代整数：
<li v-for="n in 10">{{n}}</li>
范围是从0到10，包含0与10。
3 计算属性
3.1 computed
计算属性类似与方法调用，比如之前的反转字符串的例子：
{{message.split('').reverse().join('')}}
这样看起来很长，可以使用计算属性进行简化：
<div id="app">
<p>{{reverse}}</p>
</div>
<script>
new Vue({
el:'#app',
data:
{
message:'Test'
},
computed:
{
reverse:function()
{
return this.message.split.reverse().join('')
}
}
})
</script>
这里声明了一个计算属性reverse，提供的函数作为属性reverse的getter，reverse依赖于message，当message更新时，reverse也会更新。
3.2 computed与methods
可以使用methods来代替computed：
methods:
{
reverse:function()
{
return this.message.split.reverse().join('')
}
}
对应只需要增加一对()：
<div id="app">
<p>{{reverse()}}</p>
</div>
computed基于它的依赖缓存，只有相关依赖修改时才会重新取值，而使用methods，在重新渲染时函数总会重新调用执行。
3.3 setter
computed默认只有 getter，不过也可以自行提供setter：
var vm = new Vue({
el:'#app',
data:
{
name:'test',
url:'https://www.test.com'
},
computed:
{
site:
{
get:function()
{
return this.name + ' ' + this.url;
},
set:function(value)
{
var values = value.split(' ')
this.name = values[0]
this.url = values[1]
}
}
}
})
vm.site = 'test2 https://www.test2.com'
document.write('name:'+vm.name)
document.write('<br>')
document.write('url:'+vm.url)
输入如下：
