v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
yes
no
var app1 = new Vue({
el: '#app1',
data: {
ok: true
}
});
用 key 管理可复用的元素
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 不支持 元素,也不支持 v-else
显示
隐藏
var app3 = new Vue({
el: '#app3',
data: {
show: true,
hide: false
}
});
用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法。
-
{{index}}-{{item.message}}
-
{{value}}
-
{{key}} : {{value}}
-
{{index}}. {{key}} : {{value}}
{{ index }}. {{ name }}: {{ value }}
- {{value}}
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() 。它们不会改变原始数组,而总是返回一个新数组。