vue学习(十六)动态组件

约定不等于承诺〃 2022-04-18 00:18 248阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;component :is="type"&gt;&lt;/component&gt;
        &lt;!--&lt;child-one v-if="type=='child-one'"&gt;&lt;/child-one&gt;
        &lt;child-two v-if="type=='child-two'"&gt;&lt;/child-two&gt;--&gt;
        &lt;button @click="handleclick"&gt;点击&lt;/button&gt;
    &lt;/div&gt;

&lt;script&gt;

Vue.component("child-one",{
            template:'&lt;div v-once&gt;child-one&lt;/div&gt;'
        })

Vue.component("child-two",{
            template:'&lt;div v-once&gt;child-two&lt;/div&gt;'
        })

var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                type:''
            },
            methods:{
                handleclick:function () {
                    this.type=this.type=='child-one'?'child-two':'child-one'
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 动态组件

动态组件通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件： var vm = new Vue

傷城~/ 2023年06月18日 03:54/ 0 赞/ 30 阅读

相关 Vue动态组件渲染

子组件封装动态切换的子组件一 <template> <div> 我是多行文本框{ { config.name }

今天药忘吃喽~/ 2022年11月10日 05:38/ 0 赞/ 273 阅读

相关 Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

文章目录 Vue学习（动态组件、组件路由缓存keepalive）-学习笔记动态组件组件路由缓存keepalive

墨蓝/ 2022年10月04日 15:00/ 0 赞/ 234 阅读

相关【Vue】—动态组件

【Vue】—动态组件 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiB

迈不过友情╰/ 2022年09月11日 12:22/ 0 赞/ 256 阅读

相关 Vue动态组件

Vue动态组件 1、序言 2、实例 1、序言在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通

╰+攻爆jí腚メ/ 2022年08月30日 01:56/ 0 赞/ 261 阅读

相关 vue学习(十六)动态组件

<table> <tbody> <tr> <td> <pre><code><!DOCTYPE html> <html lang="en"&g

约定不等于承诺〃/ 2022年04月18日 00:18/ 0 赞/ 249 阅读

相关 webpack学习（十六）：glob配置动态入口

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

太过爱你忘了你带给我的痛/ 2022年04月05日 10:27/ 0 赞/ 428 阅读

相关 Vue学习笔记（十六）——组件的懒加载

参考文档一：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 参考文档二：[https://www

曾经终败给现在/ 2022年02月13日 15:44/ 0 赞/ 1200 阅读

相关 vue——动态组件

通过使用保留的 `<component>` 元素，动态地绑定到它的 `is` 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组

ゞ浴缸里的玫瑰/ 2021年09月14日 12:58/ 0 赞/ 497 阅读

相关 vue 动态组件

1、引入组件,并在components中注入 2、动态组件 <component :is='x'></component> is

矫情吗；*/ 2021年07月24日 23:23/ 0 赞/ 532 阅读