當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue的条件渲染指令

發布時間：2025/3/19 vue 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue的条件渲染指令小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

與JS的條件語句類似，Vue的條件指令可以根據表達式的值在DOM中渲染或者銷毀元素/組件

v-else-if要緊跟v-if，v-else要緊跟v-else-if或者v--if，表達式的值為真時，當前元素/組件以及所有子節點將被渲染，為假時被移除。

<!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> <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內置的<template>元素上使用條件指令，最終渲染的結果不會包含該元素。

<div id="app"><template v-if="status === 1"><p>這是文本1</p><p>這是文本2</p><p>這是文本3</p></template></div> <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> <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>

輸入內容后，點擊切換按鈕，雖然DOM變了，但是之前在輸入框輸入的內容并沒有改變，只是替換了placeholder的內容，說明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> <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后，就不會復用了，切換輸入類型時輸入的內容也會被刪除，不過<label>的元素仍然是被復用的，因為沒有添加key屬性。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue的条件渲染指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SpringMVC组件说明以及配置代码
下一篇： Vue的列表渲染指令