利用component组件和is属性实现动态组件

最新推荐文章于 2024-07-05 15:36:46 发布

南南合作

最新推荐文章于 2024-07-05 15:36:46 发布

阅读量5.7k

点赞数 4

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42442123/article/details/85791115

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/vue2.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li @click='test="che"'><a href="#">车厘子</a></li>
            <li @click='test="mi"'><a href="#">猕猴桃</a></li>
        </ul>
        <!-- component标签创建动态组件，他的is属性指向谁，就显示哪个组件 -->
        <component :is='test'></component>
    </div>
    <script>
        Vue.component('che', {
            template: `<p>这是车厘子</p>`
        })
        Vue.component('mi', {
            template: `<p>这是猕猴桃</p>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                test: ''
            }
        })
    </script>
</body>

</html>