1.背景
2.v-if簡單使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h3>{{title}}</h3> <pre> v-if的原理： v-if后面的條件為false時，對應的元素以及其子元素不會渲染。 也就是根本沒有不會有對應的標簽出現在DOM中。 </pre> <hr> 當前分數為:{{number}} <br> 分數等級為: <p v-if="number>=90">A</p> <p v-else-if="number>=80">B</p> <p v-else-if="number>=70">C</p> <p v-else-if="number>=60">D</p> <p v-else>E</p> </div> <script> const app = new Vue({ el: '#app', data: { title: '條件判斷-if使用', name: 'ldp', number: 60 } }); </script> </body> </html>
3.v-if實現切換賬號登錄類型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h3>{{title}}</h3> <pre> 需求: 假設做一個登錄頁面 默認使用微信登錄,點擊切換按鈕,可以使用QQ登錄 </pre> <hr> <div> <span v-if="type==='QQ'"> <label>QQ號:</label> <input placeholder="請輸入QQ賬號"> </span> <span v-else> <label>微信號:</label> <input placeholder="請輸入微信號"> </span> <button @click="changeType">賬號類型切換</button> </div> <hr> <div> <pre> 1.問題： 如果我們在有輸入內容的情況下，切換了類型，我們會發現文字依然顯示之前的輸入的內容。 但是按道理講，我們應該切換到另外一個input元素中了。 在另一個input元素中，我們並沒有輸入內容。 為什么會出現這個問題呢？ 2.原因： 這是因為Vue在進行DOM渲染時，出於性能考慮，會盡可能的復用已經存在的元素，而不是重新創建新的元素。 在上面的案例中，Vue內部會發現原來的input元素不再使用，直接作為else中的input來使用了。 3.解決方案： 如果我們不希望Vue出現類似重復利用的問題，可以給對應的input添加key 並且我們需要保證key的不同 </pre> </div> <hr> <div> <span v-if="type==='QQ'"> <label>QQ號:</label> <input placeholder="請輸入QQ賬號" key="qq-input"> </span> <span v-else> <label>微信號:</label> <input placeholder="請輸入微信號" key="wx-input"> </span> <button @click="changeType">賬號類型切換</button> </div> </div> <script> const app = new Vue({ el: '#app', data: { title: '條件判斷-if實現賬號登錄切換', name: 'ldp', type: 'QQ' }, methods: { changeType() { this.type = this.type === 'QQ' ? 'WX' : 'QQ' } } }); </script> </body> </html>
4.v-if與v-show的區別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h3>{{title}}</h3> <pre> v-show的用法和v-if非常相似，也用於決定一個元素是否渲染： v-if和v-show對比 v-if和v-show都可以決定一個元素是否渲染，那么開發中我們如何選擇呢？ v-if當條件為false時，壓根不會有對應的元素在DOM中。 v-show當條件為false時，僅僅是將元素的display屬性設置為none而已。 開發中如何選擇呢？ 當需要在顯示與隱藏之間切片很頻繁時，使用v-show 當只有一次切換時，通過使用v-if </pre> <hr> <div> <span v-show="showQQ"> <label>QQ號:</label> <input placeholder="請輸入QQ賬號"> </span> <span v-show="!showQQ"> <label>微信號:</label> <input placeholder="請輸入微信號"> </span> <button @click="changeType">賬號類型切換</button> </div> </div> <script> const app = new Vue({ el: '#app', data: { title: '條件判斷v-show與if的區別', name: 'ldp', showQQ: true }, methods: { changeType() { this.showQQ = this.showQQ ? false : true } } }); </script> </body> </html>
完美!