Vue框架中利用is特性切换组件

最新推荐文章于 2024-05-23 09:06:46 发布

关关^^

最新推荐文章于 2024-05-23 09:06:46 发布

阅读量700

点赞数 1

分类专栏：前端文章标签： is特性前端 vue

本文链接：https://blog.csdn.net/weixin_44451917/article/details/86080359

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

is特性不仅可以解决html中有限制的标签问题外，还可以用于vue中组件切换。话不多说直接上代码，一个动态切换组件的小例子，没有太注重样式，只是展示了功能。希望有所帮助，大家有问题或者建议可以给我留言^ ^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="fun">组件1</button>
        <button @click="fun2">组件2</button>
        <component :is="active"></component>
    </div>
    <script src="../vue.js"></script>
</body>
<script>
    const firstButton={
        template:`
            <div>组件1</div>
        `
    }
    const secondButton={
        template:`
            <div>组件2</div>
        `
    }
    const app=new Vue({
        el:"#app",
        data:{
            index:0,
            arr:[firstButton,secondButton]
        },
        components:{
            firstButton,
            secondButton
        },
        computed:{
            active(){
                return this.arr[this.index]
            }
        },
        methods:{
            fun(){
                this.index=0
            },
            fun2(){
                this.index=1
            }
        }
    })
</script>
</html>

关关^^

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue框架中利用is特性切换组件

is特性不仅可以解决html中有限制的标签问题外，还可以用于vue中组件切换。话不多说直接上代码，一个动态切换组件的小例子，没有太注重样式，只是展示了功能。希望有所帮助，大家有问题或者建议可以给我留言^ ^&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫