动态组件与v-once指令

最新推荐文章于 2022-10-25 00:11:08 发布

max_yuyu

最新推荐文章于 2022-10-25 00:11:08 发布

阅读量85

点赞数

分类专栏： vue 文章标签：动态组件与v-once指令

本文链接：https://blog.csdn.net/qq_40087726/article/details/100181116

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

点击切换child-one和child-two显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <child-one :content="result" v-if="result == 'childOne'"></child-one>
        <child-two :content="result" v-if="result == 'childTwo'"></child-two>
        <button @click="change">变化</button>
    </div>
</body>
<script>

    Vue.component('child-one',{
        props:['content'],
        template:'<div>{{content}}</div>'
    })
    Vue.component('child-two',{
        props:['content'],
        template:'<div>{{content}}</div>'
    })
    var app = new Vue({
        el:"#app",
        data:{
            result:'childOne'
        },
        methods:{
            change:function () {
                this.result = this.result === 'childOne' ? 'childTwo' : 'childOne';
            }
        }
    })
</script>
</html>

max_yuyu

关注

0
点赞
踩
0

收藏

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

点击切换child-one和child-two显示与隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态组件与v-once指令</title> <script src="../js/vue.js" t...
复制链接

扫一扫