此学习教程是对官方教程的解析,
本章节主要涉及到的官方教程地址:
v-if, v-else-if, v-else
v-if 指令:用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else-if 指令:顾名思义,充当 v-if 的“else-if 块”,可以连续使用
v-else指令: 来表示 v-if 的“else 块”
因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template>元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <ttemplate> 元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<template v-if="type === 'A'">
<div>A</div>
</template>
<template v-else-if="type === 'B'">
<div>B</div>
</template>
<template v-else-if="type === 'C'">
<div>C</div>
</template>
<template v-else>
<div>Not A/B/C</div>
</template>
</div>
<script>
var vm = new Vue({
el: '#example',
data: { type: 'A'}
})
</script>
</body>
</html>
输出结果:
key属性: 不同的值使元素不复用
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换。
在下面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素, 不会被替换掉——仅仅是替换了它的 placeholder。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
<br/>
<input type="button" @click="toggle()" value="toggle loginType value"/>
</div>
<script>
var vm = new Vue({
el: '#example',
data: { loginType: 'username'},
methods: {
toggle: function () {
this.loginType = (this.loginType!="username")?"username":"";
},
}
})
</script>
</body>
</html>
点击切换按钮前:
点击切换按钮后:
Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key attribute 即可
在input加上不同key的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<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>
<br/>
<input type="button" @click="toggle()" value="toggle loginType value"/>
</div>
<script>
var vm = new Vue({
el: '#example',
data: { loginType: 'username'},
methods: {
toggle: function () {
this.loginType = (this.loginType!="username")?"username":"";
},
}
})
</script>
</body>
</html>
点击切换按钮前:
点击切换按钮后:
总结:
Vue默认是复用(不重新渲染)已有元素,除非指定不同的key,Vue才会不复用(重新渲染)
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样。
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
重写v-if的例子,这次使用v-show:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<div v-show="type === 'A'">A</div>
<div v-show="type === 'B'">B</div>
<div v-show="type === 'C'">C</div>
<div v-show="type !== 'A' && type !== 'B' && type !== 'C'">D</div>
</div>
<script>
var vm = new Vue({
el: '#example',
data: { type: "A"}
})
</script>
</body>
</html>
运行结果:
可以看到B,C,D元素还在,只是css样式变成display:none而导致看不见了。
v-if和v-show的区别
v-if | v-show | |
---|---|---|
语法 | 支持 <template> 元素,支持 v-else | 不支持 <ttemplate> 元素,也不支持 v-else |
渲染时间 | 惰性的,条件第一次变为真时,才会开始渲染条件块 | 不管初始条件是什么,元素总是会被渲染 |
条件变化后的渲染方式 | 条件块内的事件监听器和子组件适当地被销毁和重建 | 只是简单地切换元素的 CSS property display |
初始渲染开销 | 低 | 高 |
切换开销 | 高 | 低 |
使用场景 | 在运行时条件很少改变 | 需要非常频繁地切换 |
本章节教程结束。
全部教程地址:Vue入门实战教程 | 寒于水学习网
特定模板语法实战: