共计 2378 个字符，预计需要花费 6 分钟才能阅读完成。
v-if、v-else-if、v-else 以及 v -show
条件指令 v -if、v-else-if、v-else
类似于 JavaScript 里的 if、else-if、else，这三个指令根据表达式的值对 DOM/ 组件进行渲染 / 销毁。
值得注意的是，v-else-if 必须跟在 v -if 之后，v-else 必须跟在 v -else-if 或者 v -if 之后。如果想一次性判断多个元素，可以将他们包裹在 template 之内，使用条件指令操作外层的 template，template 并不会包含在最终的渲染结果中。
<div id=”app”>
<template v-if=”state”>
<p> 文本 A </p>
<p> 文本 B </p>
<p> 文本 C </p>
</template>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
state: true
}
})
</script>
Vue 在渲染元素时，出于效率考虑，会尽可能的复用已有元素而非重新渲染。
<div id=”app”>
<input type=”text” v-if=”state” placeholder=” 电话 ”>
<input type=”text” v-else placeholder=” 邮箱 ”>
<button @click=”toggle”> 切换 </button>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
state: false
},
methods: {
toggle () {
this.state = !this.state
}
}
})
</script>
点击“toggle”按钮，输入框内的 placeholder 改变，但当输入内容再进行切换后，内容依旧存在，说明 <input> 被复用了，只是修改了 placeholder。
要是不希望被复用，需要在指定的元素上添加 key 值，key 值存在且唯一。
<div id=”app”>
<input type=”text” v-if=”state” placeholder=” 电话 ” key=”phone”>
<input type=”text” v-else placeholder=” 邮箱 ” key=”email”>
<button @click=”toggle”> 切换 </button>
</div>
v-show
面试考点：v-show 和 v -if 实现的视觉效果完全一致，但是还是有本质区别的，v-show 改变 CSS display 的值，v-if 彻底移除元素。开发技巧：因为 v -show 是改变 CSS 属性，无论表达式真假与否，都会被编译。v-if 直接操作 DOM 的移除 / 渲染，所以 v -if 更适合不经常变化的场景，v-show 适合频繁变化的场景。
列表循环指令 v -for
表达式需结合 in 使用，类似 v -for=”item in items”
数组
<div id=”app”>
<ul>
<li v-for=”(item, index) in items”>{{index}}-{{item}}</li>
</ul>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
items: [
‘ 大盘鸡 ’,
‘ 周黑鸭 ’,
‘ 糖醋里脊 ’,
]
}
})
</script>
用 v -for 将 items 中的数据循环渲染，item 相当于 items 元素的别名，同时还支持 index 作为可选索引
对象
遍历对象属性时，有两个可选参数，分别为键名和索引
<div id=”app”>
<ul>
<li v-for=”(value, key, index) in user”>{{index}}-{{key}}:{{value}}</li>
</ul>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
user: {
name: ‘ 一枚蛋 Oops’,
age: 3,
hobby: ‘ 漂亮妹子 ’
}
}
})
</script>
整数
<span v-for=”n in 5″>{{n}}</span>
输出：12345
v-text 和 v -html
v-text
面试考点：v-text 和 {{}} 功能一样，展示文本，但是 v -text 比 {{}} 好的地方是，当网速很慢或者 javascript 出错时，会暴露我们的{{xxx}}，而 v -text 不会显示出来。
<span v-text=”message”></span>
v-html
面试考点：v-html 和 v -text 区别在于 v -text 输出的是纯文本，浏览器不会对其再进行 html 解析，但 v -html 会将其当 html 标签解析后输出。
<span v-html=”message”></span>
message: ‘<strong>Hello</strong> world’,
Hello world 以上是本期全部内容，欲知后事如何，请听下回分解 <(~︶~)↗[GO!]
