vuejs动态组件和v-once指令
<div id='root'>
<child-one v-if='type==="child-one"'></child-one>
<child-two v-if='type==="child-two"'></child-two>
<button @click='handleBtnClick'>Button</button>
</div> <script>
Vue.component('child-one',{
template:'<div>child-one</div>'
})
Vue.component('child-two',{
template:'<div>child-two</div>'
}) var vm = new Vue({
el:'#root',
data:{
type:'child-one'
},
methods:{
handleBtnClick:function(){
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
}
}
})
</script>
<div id='root'>
<component :is='type'></component>
<button @click='handleBtnClick'>Button</button>
</div> <script>
Vue.component('child-one',{
template:'<div>child-one</div>'
})
Vue.component('child-two',{
template:'<div>child-two</div>'
}) var vm = new Vue({
el:'#root',
data:{
type:'child-one'
},
methods:{
handleBtnClick:function(){
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
}
}
})
</script>
<div id='root'>
<child-one v-if='type==="child-one"'></child-one>
<child-two v-if='type==="child-two"'></child-two>
<button @click='handleBtnClick'>Button</button>
</div> <script>
Vue.component('child-one',{
template:'<div v-once>child-one</div>'
})
Vue.component('child-two',{
template:'<div v-once>child-two</div>'
}) var vm = new Vue({
el:'#root',
data:{
type:'child-one'
},
methods:{
handleBtnClick:function(){
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
}
}
})
</script>
vuejs动态组件和v-once指令的更多相关文章
- vuejs动态组件给子组件传递数据
vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...
- Vuejs——(12)组件——动态组件
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- vue2入坑随记(二) -- 自定义动态组件
学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...
- Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用
template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...
- 组件基础(参数校验和动态组件、v-once)—Vue学习笔记
最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...
- Vue.js动态组件
动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...
- Vue 动态组件、动画、插件
1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...
随机推荐
- Vuejs 实现权限管理
程序运行时,router只配置登陆 首页404 等基本页面 import Main from '@/views/Main.vue'; // 不作为Main组件的子页面展示的页面单独写,如下 expor ...
- hxq的库
在页面中使用 可以调取html模板 /** * Created by DY040 on 2017/10/31. */ var hxq = { init: function () { var self ...
- 记录CentOS7.X版本下安装MySQL5.7数据库
记录CentOS7.X版本下安装MySQL5.7数据库 设置rpm下载目录在/opt目录下新建一个目录存放mysql cd /opt sudo mkdir mysql12 下载MySQL的源 wg ...
- java将pdf转成base64字符串及将base64字符串反转pdf
package cn.wonders.utils; import java.io.BufferedInputStream;import java.io.BufferedOutputStream;imp ...
- python 进程池Pool以及Queue的用法
import os,time,random from multiprocessing import Pool def task(name): print('正在运行的任务:%s,PID:(%s)'%( ...
- 获取tomcat路径
String serverPath = System.getProperty("catalina.home");
- Substring Frequency (II) LightOJ - 1427 AC自动机
https://vjudge.net/problem/LightOJ-1427 把所有模式串加入ac自动机,然后search的时候暴力,每个子串都暴力一下就好. 其实AC自动机就是,先建立好trie图 ...
- SSM-@Transactional 注释不生效
1.在applicationConext.xml 中配置事务注解驱动 <!-- 事务注解驱动 --> <tx:annotation-driven /> <!-- 配置事务 ...
- centos6.3 配置防火墙,开启80端口、3306端口
vi /etc/sysconfig/iptables -A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT(允许80端口通过防火 ...
- asp实现网页浏览总数
<% AlldayView=0 Set Rs=Server.CreateObject("Adodb.RecordSet") Sql="select * from v ...