Vue的条件渲染指令
生活随笔
收集整理的這篇文章主要介紹了
Vue的条件渲染指令
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
與JS的條件語句類似，Vue的條件指令可以根據(jù)表達式的值在DOM中渲染或者銷毀元素/組件
v-else-if要緊跟v-if，v-else要緊跟v-else-if或者v--if，表達式的值為真時，當前元素/組件以及所有子節(jié)點將被渲染，為假時被移除。
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue條件渲染指令</title></head><body><div id="app"><p v-if="status === 1">當status為1時顯示該行</p><p v-else-if="status === 2">當status為2時顯示該行</p><p v-else>當status不為為1或2時顯示該行</p></div><!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>var app = new Vue({el:'#app',data:{status:1}}) </script></body> </html>如果一次判斷的是多個元素，可以在Vue.js內(nèi)置的<template>元素上使用條件指令，最終渲染的結果不會包含該元素。
<div id="app"><template v-if="status === 1"><p>這是文本1</p><p>這是文本2</p><p>這是文本3</p></template></div><!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>var app = new Vue({el:'#app',data:{status:1}}) </script>Vue在渲染元素時，處于效率考慮，會可能地復用已有的元素而非重新渲染
<div id="app">< BR>??<templatev-if="type==='name'"><label>用戶名</label><input placeholder="輸入用戶名"></template><template v-else><label>郵箱：</label><input placeholder="輸入郵箱"></template><button @click="handleToggleClick">切換輸入類型</button></div><!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>var app = new Vue({el:'#app',data:{type:'name'},methods:{handleToggleClick:function(){this.type =this.type==='name'?'mail':'name'}}}) </script>?
輸入內(nèi)容后，點擊切換按鈕，雖然DOM變了，但是之前在輸入框輸入的內(nèi)容并沒有改變，只是替換了placeholder的內(nèi)容，說明input元素被復用了。
如果不希望這樣做，可以使用Vue提供的key屬性，他可以讓你自己決定是否要復用元素，key的值
必須是唯一的：
<div id="app"><template v-if="type==='name'"><label>用戶名</label><input placeholder="輸入用戶名" key="name-input"></template><template v-else><label>郵箱：</label><input placeholder="輸入郵箱" key="mail-input"></template><button @click="handleToggleClick">切換輸入類型</button></div><!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>var app = new Vue({el:'#app',data:{type:'name'},methods:{handleToggleClick:function(){this.type =this.type==='name'?'mail':'name'}}}) </script>給兩個<input>都增加key后，就不會復用了，切換輸入類型時輸入的內(nèi)容也會被刪除，不過<label>的元素仍然是被復用的，因為沒有添加key屬性。
?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Vue的条件渲染指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringMVC组件说明以及配置代码
- 下一篇： Vue的列表渲染指令