46.VUE学习之--组件之使用动态组件灵活设置页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- Latest compiled and minified CSS & JS -->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="hdcms">
<div :is="formType"></div>
<input type="radio" v-model="formType" value="hdInput" >文本框
<input type="radio" v-model="formType" value="hdTextarea">文本域
</div>
<script type="text/x-template" id="hdInput">
<div><input type="text"></div>
</script>
<script type="text/x-template" id="hdTextarea">
<div><textarea name="" id="" cols="30" rows="10"></textarea></div>
</script>
<script>
var hdInput = {
template: "#hdInput",
};
var hdTextarea = {
template: "#hdTextarea",
};
new Vue({
el: '#hdcms',
components: {hdInput,hdTextarea},
data: {
formType:'hdInput'
}
});
</script>
</body>
</html>
效果:
46.VUE学习之--组件之使用动态组件灵活设置页面布局的更多相关文章
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue19 组建 Vue.extend component、组件模版、动态组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- AntDesign vue学习笔记(四)使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- Vue进阶(Bus/作用域slot/动态组件)
一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过pro ...
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局
[本文出自天外归云的博客园] 需求图示如下,多级纵向动态表头表格: 我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的.多级的.纵向的表头: <template ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- 学习笔记:Vue——动态组件&异步组件
动态组件 01.在动态组件上使用keep-alive,保持组件的状态,以避免反复重渲染导致的性能问题. <!-- 失活的组件将会被缓存!--> <keep-alive> < ...
随机推荐
- Jmeter性能测试 入门--转载
转载: Jmeter性能测试 入门 Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmete ...
- 深度语义匹配模型-DSSM 及其变种
转自:http://ju.outofmemory.cn/entry/316660 感谢分享~ DSSM这篇paper发表在cikm2013,短小但是精炼,值得记录一下 ps:后来跟了几篇dssm的pa ...
- CompletionService的poll方法
1.poll():马上返回完成的任务,若没有,则返回null 2.poll(long timeout, TimeUnit unit): 等待timeout时间,如果大于最短任务完成时间,则获取任务结果 ...
- dwr2.0版本的demo
谈起DWR,这个东西在上学的时候接触过,但工作之后就再也没有用过. 对DWR的印象是不手写AJAX,使用JavaScript调用java后台的代码,就如同调用前台代码一样. ...
- 2018年哔哩哔哩bilibili前端开发工程师在线笔试1
##基础编程能力考查(共1题) 给定一个数组,其中有n(1<n<10000)个整数,检查是否能通过修改不多余一个元素就能让数组从小到大排列. 例1: 输入:[4,2,3] 输出:true ...
- spring对数据库的操作、spring中事务管理的介绍与操作
jdbcTemplate的入门 创建maven工程 此处省略 导入依赖 <!-- https://mvnrepository.com/artifact/org.springframework/s ...
- 控制台执行java找不到或无法加载主类
- NO.008-2018.02.13《折桂令·春情》元代:徐再思
折桂令·春情_古诗文网 折桂令·春情 元代:徐再思 平生不会相思,才会相思,便害相思.生下来以后还不会相思,才刚刚懂了什么是相思,却深受着相思之苦. 身似浮云,心如飞絮,气若游丝.身像飘浮的云,心 ...
- RPMForge介绍及安装
网站RPMForge介绍,安装 http://wiki.centos.org/AdditionalResources/Repositories/RPMForge#head-f0c3ecee3dbb40 ...
- linux命令之添加删除磁盘分区
之前已经写过df和fdisk的区别了,df可以显示当前已经挂载的磁盘分区,df -T可以额外显示文件系统类型 fdisk -l可以显示出所有挂载未挂载的分区,但不显示文件类型 在我的虚拟机上有一块分配 ...