vue的动态组件 <template :is='变量'></template>

可以通过改变变量,来改变template的替换内容。达到选项卡的功能

如果想要切换保持不重新创建,用<keep-alive>标签。

但是请注意:那个滚动条的滚动位置记录不下来。input里的内容可以。

    <div id="app">
<button @click='change1'>passage1</button><button @click='change2'>passage2</button>
<keep-alive>
<component :is='myComponent'></component> </keep-alive>
</div>
<!-- <script src="../vue.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js"></script>
<script>
var myComponent1 = {
template:`
<div>
<div class="content"></div>
<input type="text">
</div>
`
}
var myComponent2 = {
template:`
<div class="content"></div>
`
}
var vm = new Vue({
el: "#app",
data:{
myComponent: myComponent1
},
methods:{
change1(){
this.myComponent = myComponent1
},
change2(){
this.myComponent = myComponent2
}
} })

vue动态组件切换(选项卡)的更多相关文章

  1. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  2. Vue 动态组件和异步组件

    基础案例 动态组件切换类比"bilibili-个人中心"的横向菜单切换不同的标签页的功能. 在Vue中可以使用 component 标签,并加一个特殊的属性(attribute) ...

  3. Vue实例 动态组件实现选项卡

    动态组件 选项卡 有n种实现方法 哈哈哈哈 <style> #app{ width: 260px; height: 200px; background: #fff; box-shadow: ...

  4. Vue 动态组件、动画、插件

    1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...

  5. Vue动态组件&异步组件

    在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...

  6. vue动态组件-根据数据展示特定组件

    vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由 假设有以下三个组件: com1.com2.com3 有一个外层路/coms中代码如下 <templa ...

  7. vue 动态组件的传值

    vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案 第一种: 父组件向子组件传的是一个json对象,ES6的方法O ...

  8. Vue - 动态组件 & 异步组件

    动态组件 <div id="app"> <components :is="com[2]"></components> < ...

  9. vue 动态组件、父子组件传参

    1.vue中的自定义属性并获得属性的值 自定义属性::data-id语法为 :data-属性  获取属性的值:ev.target.dataset.id 2.vue父子组件传值 3.动态组件使用

随机推荐

  1. Java通过SMS短信平台实现发短信功能

    在项目中使用过发短信的功能,但那个由于公司内部的限制很麻烦,今天在网上找到一个简单的,闲来无事就把它记录如下: 本程序是通过使用中国网建提供的SMS短信平台实现的(该平台目前为注册用户提供5条免费短信 ...

  2. 主流浏览器Css&js hack写法

    参考: BROWSER HACKS 主流浏览器的Hack写法

  3. Linux系统中如何查找大文件或文件夹的方法

    在Windows系统中,我们可以使用TreeSize工具查找一些大文件或文件夹,非常的方便高效,在Linux系统中,如何去搜索一些比较大的文件呢?下面我整理了一下在Linux系统中如何查找大文件或文件 ...

  4. Java编译过程(传送门)

    我不是要做一门编程语言,了解这个对我现在的工作也没什么帮助,纯粹好奇而已. 传送门

  5. 一个网站SEO优化方案

    首先,前端/页编人员主要负责站内优化,主要从四个方面入手: 第一个,站内结构优化 合理规划站点结构(1.扁平化结构 2.辅助导航.面包屑导航.次导航) 内容页结构设置(最新文章.推荐文章.热门文章.增 ...

  6. 华为ap3010DN-V2刷出胖AP并配置接入POE交换机实现上网

    配置FAT AP二层组网示例 组网图形 图1 配置二层网络WLAN基本业务示例组网图 组网需求 如图1所示,FAT AP通过有线方式接入Internet,通过无线方式连接终端.现某企业分支机构为了保证 ...

  7. BitBlt 函数 详解, StretchBlt、SetStretchBltMode、SetBrushOrgEx 按句柄截图、直接截取缩略图

    BitBlt 该函数对指定的源设备环境区域中的像素进行位块(bit_block)转换,以传送到目标设备环境. 函数原型 [DllImport("gdi32.dll")] publi ...

  8. linux源码安装服务器所需要的一些依赖库(待完善)

    apaeche :yum -y install gcc gcc-c++ zlib zlib-devel openssl openssl-devel cmake kernel-devel pcre-de ...

  9. MKMapView:确定区域更改是否来自用户交互

    参见: http://www.b2cloud.com.au/tutorial/mkmapview-determining-whether-region-change-is-from-user-inte ...

  10. 【Zookeeper】连接ZooKeeper的方式

    使用客户端命令连接Zookeeper 连接Server 使用命令./zkCli.sh -server 127.0.0.1:2181 使用JAVA连接使用ZK POM添加引用 <dependenc ...