vue动态组价实例

来源：互联网发布：武汉网络施工队编辑：程序博客网时间：2024/05/18 17:01

自学vue，其中最懵的就是没有实例，下面是vue中动态组件的简单实例，希望对菜鸟的我们有所帮助。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动态组件</title>    <script src="vue.js"></script></head><body><div id="app"><component v-bind:is="currentView"></component>    <!--component不是固定的元素，可以更换元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：--><button v-on:click="currentfn(n++)">点击</button></div><script>    var app=new Vue({        el:'#app',        data:{            currentView:'home',//currentView是固定的属性，不能改变。            n:1        },        components:{           home:{template:'<h1>我是home</h1>'},            posts:{template:'<h2>我是posts</h2>'},            archive:{template:'<h3>我是archive</h3>'}        },        methods:{            currentfn:function (n) {                if(n<2){                    this.currentView =['home','posts','archive'][n]                }else{                    app.n=0;                    this.currentView =['home','posts','archive'][n]                }            }        }    })</script></body></html>

不明白的，可以对照官网上的解释来看会更清晰一点。

阅读全文

1 0