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)

輸入如下：