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

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>
展开阅读全文

没有更多推荐了,返回首页