vue中toggle切換的3種寫法

本文轉載自查看原文 2019-07-23 15:55 3865 vue

　　前言：查看下面代碼，在任意編輯器中直接復制粘貼運行即可

　　1：非動態組件（全局注冊2個組件，借用v-if指令和三元表達式）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle切換-非動態組件方式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <child-one v-if="type === 'child-one'"></child-one>
            <child-two v-if="type === 'child-two'"></child-two>
            <button @click="handleClick">call me</button>
        </div>
        
        <script>
            
            Vue.component('child-one', {
                template: '<div>child-one</div>'
            })
            
            Vue.component('child-two', {
                template: '<div>child-two</div>'
            })
            
            var vm = new Vue({
                el: '#root',
                data: {
                    type: 'child-one'
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child-one'?'child-two':'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

　　2：動態組件（使用vue自帶component標簽，它表示一個動態組件，配合is屬性綁定type，動態組件會根據is里數據的的變化，自動加載不同的組件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>toggle切換-動態組件方式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <component :is="type"></component>
            <button @click="handleClick">call me</button>
        </div>
        
        <script>
            
            Vue.component('child-one', {
                template: '<div>child-one</div>'
            })
            
            Vue.component('child-two', {
                template: '<div>child-two</div>'
            })
            
            var vm = new Vue({
                el: '#root',
                data: {
                    type: 'child-one'
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child-one'?'child-two':'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

　　3：使用once指令（不要過度使用）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>once指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <child-one v-if="type === 'child-one'"></child-one>
            <child-two v-if="type === 'child-two'"></child-two>
            <button @click="handleClick">call me</button>
        </div>
        
        <script>
            
            Vue.component('child-one', {
                template: '<div v-once>child-one</div>'
            })
            
            Vue.component('child-two', {
                template: '<div v-once>child-two</div>'
            })
            
            var vm = new Vue({
                el: '#root',
                data: {
                    type: 'child-one'
                },
                methods: {
                    handleClick: function() {
                        this.type = this.type === 'child-one'?'child-two':'child-one'
                    }
                }
            })
        </script>
    </body>
</html>

　　　注：once優點——每次切換vue底層都是先銷毀，然后在創建一個組件，這樣是有一定性能消耗的，

　　　　　　　　　　　once指令切換組件時不會銷毀在重新創建組件，而是在第一次切換時把組件存入內存，之后就直接從內存里拿出來使用

　　　　once缺點——建議不要過度使用這個指令。除非當你需要渲染大量靜態內容時，

　　　　　　　　　　　極少數的情況下它會給你帶來便利，除非你發現渲染因此變得很慢，否則它是沒有必要的，再加上它在后期會帶來很多困惑，

　　　　　　　　　　　例如，一個開發者並不熟悉 v-once 或漏看了它在模板中，他們可能會花很多時間去找出模板為什么無法正確更新

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Unity UGUI - Toggle 切換開關【css】css實現點擊Toggle功能/icon切換 vue中密碼顯示隱藏切換 vue中實現動態切換不同的值 Vue指令：v-for的用法；v-bind綁定class的幾種寫法；tab標簽切換 vue中通過cross-env插件配置三種環境(開發，測試，生產)打包，不用切換api Vue，組件切換-切換動畫 vue 圖片切換 Vue 組件切換 vue實例中中data屬性三種寫法