v-if 指令用于條件性地渲染一塊內(nèi)容臭笆。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染进栽。
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面亭珍，否則它將不會(huì)被識(shí)別杨箭。
<div id="app1">
<p v-if="ok">yes</p>
<p v-else>no</p>
</div>
var app1 = new Vue({
el: '#app1',
data: {
ok: true
}
});
用 key 管理可復(fù)用的元素
<div id="app2" class="demo">
<div>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
</div>
<button @click="toggleLoginType">Toggle login type</button>
</div>
var app2 = new Vue({
el: '#app2',
data: {
loginType: 'username'
},
methods: {
toggleLoginType: function () {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
});
帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中嗜历。v-show 只是簡(jiǎn)單地切換元素的 CSS 屬性 display俱济。
注意误阻，v-show 不支持 <template> 元素债蜜，也不支持 v-else
<div id="app3">
<p v-show="show">顯示</p>
<p v-show="hide">隱藏</p>
</div>
var app3 = new Vue({
el: '#app3',
data: {
show: true,
hide: false
}
});
用 v-for 指令基于一個(gè)數(shù)組來渲染一個(gè)列表。v-for 指令需要使用 item in items 形式的特殊語(yǔ)法究反，其中 items 是源數(shù)據(jù)數(shù)組寻定，而 item 則是被迭代的數(shù)組元素的別名。也可以用 of 替代 in 作為分隔符奴紧，因?yàn)樗亲罱咏?JavaScript 迭代器的語(yǔ)法特姐。
<!--列表渲染 v-for -->
<ul id="app4">
<li v-for="(item,index) in items">
{{index}}-{{item.message}}
</li>
</ul>
<!--一個(gè)對(duì)象的 v-for-->
<ul id="app5">
<li v-for="value of object">
{{value}}
</li>
</ul>
<ul id="app6">
<li v-for="(value, key) of object">
{{key}} : {{value}}
</li>
</ul>
<ul id="app7">
<li v-for="(value, key, index) of object">
{{index}}. {{key}} : {{value}}
</li>
</ul>
<!--key的工作方式類似于一個(gè)屬性，所以你需要用 v-bind 來綁定動(dòng)態(tài)值 (在這里使用簡(jiǎn)寫)-->
<div v-for="item in items" :key="item.id">
<!-- 內(nèi)容 -->
</div>
<!-- 也可以用 v-for 通過一個(gè)對(duì)象的屬性來迭代 -->
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
<ul id="app8">
<li v-for="value of userProfile">{{value}}</li>
</ul>
var app4 = new Vue({
el: '#app4',
data: {
items: [
{ message: 'aaa'},
{ message: 'bbb'}
]
}
});
var app5 = new Vue({
el: '#app5',
data: {
object: {
firstName: 'Jones',
lastName: 'Due',
age: 30
}
}
});
var app6 = new Vue({
el: '#app6',
data: {
object: {
firstName: 'Jones',
lastName: 'Due',
age: 30
}
}
});
var app7 = new Vue({
el: '#app7',
data: {
object: {
firstName : 'Jones',
lastName: 'Due',
age: 30
}
}
});
var app8 = new Vue({
el: '#app8',
data: {
userProfile: {
name: 'zhangsan'
}
}
});
//對(duì)于已經(jīng)創(chuàng)建的實(shí)例黍氮，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性唐含。但是浅浮，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。
//你可以添加一個(gè)新的 age 屬性到嵌套的 userProfile 對(duì)象
Vue.set(app8.userProfile,'age','30');
//你還可以使用 app8.$set 實(shí)例方法捷枯，它只是全局 Vue.set 的別名：
app8.$set(app8.userProfile, 'sex', '男');
變異方法 (mutation method)
Vue 將被偵聽的數(shù)組的變異方法進(jìn)行了包裹滚秩，所以它們也將會(huì)觸發(fā)視圖更新。這些被包裹過的方法包括：
push() pop() shift() unshift() splice() sort() reverse()
變異方法淮捆，顧名思義郁油，會(huì)改變調(diào)用了這些方法的原始數(shù)組。相比之下攀痊，也有非變異 (non-mutating method) 方法桐腌，例如 filter()、concat() 和 slice() 苟径。它們不會(huì)改變?cè)紨?shù)組共螺，而總是返回一個(gè)新數(shù)組运怖。
