Vue动态组件绑定和v-once

如何实现一个组件的切换显示呢?

动态组件

前台控制两个组件使用v-if条件渲染,给一个按钮一个切换方法

<child-one v-if="type=='child-one'" v-once></child-one>
<child-two v-if="type=='child-two'" v-once></child-two>
<button @click="qiehuan">切换</button>

定义两个组件以及这个vue实例的切换方法实现

Vue.component('child-one',{
    template:`
        <h3 >child-one</h3>
    `
})
Vue.component('child-two',{
    template:`
        <h3>child-two</h3>
    `
})
//Vue实例切换

var app=new Vue({
    el:"#app",
    data:{
        type:"child-one"
    },
    methods:{
        qiehuan:function(){
            this.type=this.type=="child-one"?"child-two":"child-one"
        }
    }
})

这样是不是有点麻烦?我们可以动态的显示?使用component组件绑定is

<component :is="type" ></component>

直接这样调用就行!动态判断组件的显示

v-once

        向上述就是那个符合条件显示在dom中,不符合的则直接在dom中销毁,这样是比较性能地下,如何正确的使用呢?可以加载一个v-once属性

<child-one v-if="type=='child-one'" v-once></child-one>
<child-two v-if="type=='child-two'" v-once></child-two>
<button @click="qiehuan">切换</button>

        这样处理静态资源比较好,第一次会进行加载并写入到内存中,下次使用的时候直接从内存取出就行,无需进行组件新建!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云serverless的专栏

使用腾讯云 SCF 云函数压缩 COS 对象存储文件

如何处理 COS 对象存储中的大量文件打包需求?或许 SCF 无服务器云函数能助你一臂之力!

2K2
来自专栏极乐技术社区

极乐问答No.1 | 如何理解微信小程序的生命周期?

导语 通俗的讲,生命周期就是指一个对象的生老病死。 从软件的角度来看,生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信小程...

2617
来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

27310
来自专栏雪地二货笔记库

vue学习笔记5-事件绑定-v-on

效果也相同。 而且vue也封装了好多方法,可以用这些方法简介开发 例如@keyup.enter="a",如果按下键盘的时候按下的是回车,那么就可以直接触发a方法...

1131
来自专栏Python自动化测试

页面对象的定位

在自动化的测试中,对象元素的定位和操作是自动化的核心部分,但是对象是定位是自动化的基础,在对象的基础上,才可以形成对对象的操作。

933
来自专栏js编程在工科课程中的简单应用

2.2.5 HTML5程序调试

假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

1400
来自专栏微信小程序开发

小程序中滚动条的使用,wx.pageScrollTo和&lt;scroll-view&gt;的对比

知晓程序员,专注微信小程序开发的程序员! 前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指...

8277
来自专栏Golang语言社区

go语言读取csv文件并输出的方法

本文实例讲述了go语言读取csv文件并输出的方法。分享给大家供大家参考。具体实现方法如下: package main import ( "encodi...

3798
来自专栏Android知识点总结

html5常用控件

6662
来自专栏自由而无用的灵魂的碎碎念

去掉windows8.1鸡肋的开始按钮

可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/8972885

1012

扫码关注云+社区

领取腾讯云代金券