建网站一年要多少钱/重庆seo公司怎么样
Vue自带的标签有:component,transition,transition-group,keep-alive,slot
在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:
代码如下:
<body><div id="app"><component :is="who"></component><button @click="changeComponent">changeComponent</button></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let componentA={template:`<div>I am componentA</div>`}let componentB={template:`<div>I am componentB</div>`}let componentC={template:`<div>I am componentC</div>`}let app = new Vue({el: '#app',data:{who:'componentB'},components:{"componentA":componentA,"componentB":componentB,"componentC":componentC},methods: {changeComponent(){if(this.who=="componentA"){this.who="componentB"}else if(this.who=="componentB"){this.who="componentC" }else{this.who="componentA" }}},})</script></body>