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>输出：12345v-text和v-htmlv-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!]