v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<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 管理可复用的元素
<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 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 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 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。
<!--列表渲染 v-for -->
<ul id="app4">
<li v-for="(item,index) in items">
{{index}}-{{item.message}}
</li>
</ul>
<!--一个对象的 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的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)-->
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
<!-- 也可以用 v-for 通过一个对象的属性来迭代 -->
<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'
}
}
});
//对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
//你可以添加一个新的 age 属性到嵌套的 userProfile 对象
Vue.set(app8.userProfile,'age','30');
//你还可以使用 app8.$set 实例方法，它只是全局 Vue.set 的别名：
app8.$set(app8.userProfile, 'sex', '男');
变异方法 (mutation method)
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push() pop() shift() unshift() splice() sort() reverse()
变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。
网友评论