vue 动态组件与 v-once 指令

最新推荐文章于 2023-04-12 15:01:03 发布

JinmyHe

最新推荐文章于 2023-04-12 15:01:03 发布

阅读量209

点赞数

分类专栏： web前端-Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42659625/article/details/82633944

版权

web前端-Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

实现一个功能，点击按钮，实现两个标签的切换显示隐藏：

代码一：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue v-once 指令</title>
    <script src="./vue.js"></script>
    <style>

    </style>

</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="handleBtnClick">切换</button>
    </div>

    <script>
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        Vue.component('child-two', {
            template: '<div>child-two</div>'
        })

        var app = new Vue({
            el: " #root ",
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }

        })
    </script>
</body>

</html>

代码二：可以改成用动态组件<component :is="type"></component>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue v-once 指令</title>
    <script src="./vue.js"></script>
    <style>

    </style>

</head>

<body>
    <div id="root">
        <component :is="type"></component>
        <button @click="handleBtnClick">切换</button>
    </div>

    <script>
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        Vue.component('child-two', {
            template: '<div>child-two</div>'
        })

        var app = new Vue({
            el: " #root ",
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }

        })
    </script>
</body>

</html>

代码三、使用v-once

使用到缓存，有效提高性能，不用频繁销毁元素。完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue v-once 指令</title>
    <script src="./vue.js"></script>
    <style>

    </style>

</head>

<body>
    <div id="root">
        <component :is="type"></component>
        <button @click="handleBtnClick">切换</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 app = new Vue({
            el: " #root ",
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }

        })
    </script>
</body>

</html>

JinmyHe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 动态组件与 v-once 指令

实现一个功能，点击按钮，实现两个标签的切换显示隐藏：代码一：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue v-once 指令&lt;/title&gt; &lt;script src="./vue.j
复制链接

扫一扫