欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

動態(tài)組件與v-once指令

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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="handleButtonClick">change</button>
</div>
<script type="text/javascript">
    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: {
            handleButtonClick: function() {
                this.type = (this.type == "child-one" ? "child-two" : "child-one");
            }
        }
    })
</script>
</body>
</html>

同樣的效果，使用動態(tài)組件(點擊切換會銷毀一個組件，創(chuàng)建另一個組件。很顯然，這樣對性能是有損耗的)：

成都創(chuàng)新互聯(lián)是一家專業(yè)提供隆回企業(yè)網站建設,專注與網站設計制作、成都網站設計、H5響應式網站、小程序制作等業(yè)務。10年已為隆回眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網絡公司優(yōu)惠進行中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    //當然還可以用動態(tài)組件的方式(vue自帶的標簽，它指的就是一個動態(tài)組件)。動態(tài)組件的意思是：它會根據(jù):is里面數(shù)據(jù)的變化自動加載不同的組件：
    <component :is="type"></component>

    <button @click="handleButtonClick">change</button>
</div>
<script type="text/javascript">
    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: {
            handleButtonClick: function() {
                this.type = (this.type == "child-one" ? "child-two" : "child-one");
            }
        }
    })
</script>
</body>
</html>

為了解決頻繁銷毀-創(chuàng)建，可以用v-once(因為這個v-once，在切換的時候會把要銷毀的這個放內存里了。也就是不需要創(chuàng)建了，直接從內存里拿)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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> -->

    //當然還可以用動態(tài)組件的方式(vue自帶的標簽，它指的就是一個動態(tài)組件)。動態(tài)組件的意思是：它會根據(jù):is里面數(shù)據(jù)的變化自動加載不同的組件：
    <component :is="type"></component>

    <button @click="handleButtonClick">change</button>
</div>
<script type="text/javascript">
    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: {
            handleButtonClick: function() {
                this.type = (this.type == "child-one" ? "child-two" : "child-one");
            }
        }
    })
</script>
</body>
</html>

當前標題：動態(tài)組件與v-once指令
地址分享：http://chinadenli.net/article0/gojdoo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網站收錄、軟件開發(fā)、網站設計公司、網站改版、移動網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網站