- v-test
渲染元素中的純文本。
<div id="app">
<p v-text="message"></p>
<!-- 跟下面的效果是一樣的 -->
<p>{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
message:"這里是要顯示的內(nèi)容"
}
})
</script>
注意：v-text直接輸出字符串時(shí)需要用單引號(hào)包含，否則將報(bào)錯(cuò)。例如：
<div id="app">
<!-- 注意單引號(hào) -->
<p v-text="'這是要顯示的內(nèi)容'"></p>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- v-html
將html內(nèi)容解析后輸出。
<div id="app" v-html="message"></div>
<script>
new Vue({
el: '#app',
data:{
message: "<div style='background:red;width:50px;height:50px'>123</div>"
}
})
</script>
渲染結(jié)果
- v-show
控制元素的顯示與隱藏。
<div id="app">
<!-- 將showme的值改為false再試試？ -->
<p v-show="showme">看我顯示不顯示</p>
</div>
<script>
new Vue({
el: '#app',
data:{
showme: true
}
})
</script>
注意：v-show 只是簡(jiǎn)單的改變?cè)氐膁isplay屬性，不管是 true 或 false，頁(yè)面均存在該元素。
- v-if
條件判斷指令，根據(jù)其表達(dá)式的值的真假?zèng)Q定是否渲染元素。
<div id="app">
<p v-if="iphone">iPhone</p>
<p v-if="xiaomi">小米</p>
<p v-if="huawei">華為</p>
</div>
<script>
new Vue({
el: '#app',
data:{
iphone: true,
xiaomi: false,
huawei: true
}
})
</script>
如果使用一個(gè)變量控制多個(gè)元素的顯示與隱藏，可以使用 <template> 將這些標(biāo)簽包含，如下：
<div id="app">
<!-- 將showme的值改為false再試試？ -->
<template v-if="showme">
<p>我是誰(shuí)？</p>
<p>我在哪？</p>
<p>我要干什么？</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data:{
showme: true
}
})
</script>
注意：v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if 和 v-show 比較：
v-if 和 v-show 比較
如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。
- v-else
v-else 指令之前必須有 v-if 或者 v-else-if 指令，當(dāng) if 中的條件的值為假時(shí)，即顯示 else 中的內(nèi)容。
<div id="app">
<div v-if="Math.random() > 0.5">
<p>你看得見我</p>
</div>
<div v-else>
<p>你看不見我</p>
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
如果判斷內(nèi)容中有多個(gè)元素，可以使用 <template> 標(biāo)簽包含：
<div id="app">
<template v-if="Math.random() > 0.5">
<h2>大于0.5顯示</h2>
<p>內(nèi)容A</p>
</template>
<template v-else>
<h2>小于或等于0.5顯示</h2>
<p>內(nèi)容B</p>
</template>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- v-else-if
if..else 只能滿足真假兩種選擇，如果有第三種選擇，我們可以使用 else-if 語(yǔ)句。在 vue.js 中，該指令寫法為 v-else-if，使用時(shí)，前面必須使用過 v-if 或者 v-else-if 指令。
<div id="app">
<p v-if="type == 'iphone'">iPhone</p>
<p v-else-if="type == 'xiaomi'">小米</p>
<p v-else-if="type == 'huawei'">華為</p>
<p v-else>沒有相關(guān)數(shù)據(jù)</p>
</div>
<script>
new Vue({
el: '#app',
data:{
type:'xiaomi'
}
})
</script>
- v-for
vue.js 中列表渲染使用 v-for 指令，效果類似 js 中的遍歷。
（1）遍歷對(duì)象
<div id="app">
<ul>
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
first: "A",
second: "B",
third: "C"
}
}
})
</script>
遍歷時(shí)你也可以獲取對(duì)象的索引和鍵值：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">這是第{{index+1}}個(gè)字母：{{value}}，鍵為{{key}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
first: "A",
second: "B",
third: "C"
}
}
})
</script>
運(yùn)行結(jié)果.png
（2）遍歷數(shù)組
栗子1：
<div id="app">
<ul>
<li v-for="(item, index) in items">這是第{{index+1}}個(gè)字母：{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['a','b','c','d']
}
})
</script>
運(yùn)行結(jié)果
栗子2：
<div id="app">
<ul>
<li v-for="(item, index) in items">這是第{{index+1}}個(gè)字母：{{item.letter}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{letter: "A"},
{letter: "B"},
{letter: "C"}
]
}
})
</script>
運(yùn)行結(jié)果
（3）遍歷中如果要賦值給一組元素，可在 <template> 標(biāo)簽中使用 v-for 指令。
<div id="app">
<template v-for="item in items">
<div>
<h2>{{item.title}}</h2>
<p>{{item.content}}</p>
</div>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{title: "Vue.js 教程", content: '學(xué)習(xí)vue.js，我們需要掌握···'},
{title: "HTML 教程", content: 'HTML 是前端知識(shí)的入門基礎(chǔ)···'}
]
}
})
</script>
運(yùn)行結(jié)果
最后：在遍歷數(shù)組時(shí)，你也可以使用 of 代替 in，結(jié)果是一樣的。
- v-on
綁定事件。
<div id="app">
<button v-on:click="showme">{{message}}</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: "點(diǎn)擊看看"
},
methods: {
showme: function(e){
alert('執(zhí)行showme方法');
}
}
})
</script>
（1）縮寫形式
<!-- 完整語(yǔ)法 -->
<button v-on:click="showme"></button>
<!-- 縮寫 -->
<button @click="showme"></button>
（2）內(nèi)聯(lián)處理器中的方法：內(nèi)聯(lián)語(yǔ)句允許你傳遞參數(shù)到方法中。
<div id="app">
<!--當(dāng)需要在內(nèi)聯(lián)語(yǔ)句處理器中處理原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：-->
<a href="http:://www.mingtern.com" v-on:click="say('hello', $event)">{{message}}</a>
</div>
<script>
new Vue({
el: '#app',
data: {
message: "點(diǎn)擊看看"
},
methods: {
say: function(value, e){
e.preventDefault();
alert(value);
}
}
})
</script>
（3）v-on 修飾符
<!-- 阻止瀏覽器默認(rèn)事件，此處為阻止 <a> 標(biāo)簽的跳轉(zhuǎn)事件 -->
<a href="http:://www.mingtern.com" v-on:click.prevent="say('hello')">{{message}}</a>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
v-on 支持的修飾符（部分）：
v-on 支持的修飾符
