<!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学习之--组件之使用动态组件灵活设置页面布局的更多相关文章

  1. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue19 组建 Vue.extend component、组件模版、动态组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  4. AntDesign vue学习笔记(四)使用组件切换

    同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...

  5. Vue进阶(Bus/作用域slot/动态组件)

    一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过pro ...

  6. Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听

    一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局

    [本文出自天外归云的博客园] 需求图示如下,多级纵向动态表头表格: 我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的.多级的.纵向的表头: <template ...

  8. Vue学习之路第十二篇:为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  9. 学习笔记:Vue——动态组件&异步组件

    动态组件 01.在动态组件上使用keep-alive,保持组件的状态,以避免反复重渲染导致的性能问题. <!-- 失活的组件将会被缓存!--> <keep-alive> < ...

随机推荐

  1. Jmeter性能测试 入门--转载

    转载: Jmeter性能测试 入门 Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmete ...

  2. 深度语义匹配模型-DSSM 及其变种

    转自:http://ju.outofmemory.cn/entry/316660 感谢分享~ DSSM这篇paper发表在cikm2013,短小但是精炼,值得记录一下 ps:后来跟了几篇dssm的pa ...

  3. CompletionService的poll方法

    1.poll():马上返回完成的任务,若没有,则返回null 2.poll(long timeout, TimeUnit unit): 等待timeout时间,如果大于最短任务完成时间,则获取任务结果 ...

  4. dwr2.0版本的demo

        谈起DWR,这个东西在上学的时候接触过,但工作之后就再也没有用过.       对DWR的印象是不手写AJAX,使用JavaScript调用java后台的代码,就如同调用前台代码一样.     ...

  5. 2018年哔哩哔哩bilibili前端开发工程师在线笔试1

    ##基础编程能力考查(共1题) 给定一个数组,其中有n(1<n<10000)个整数,检查是否能通过修改不多余一个元素就能让数组从小到大排列. 例1: 输入:[4,2,3] 输出:true ...

  6. spring对数据库的操作、spring中事务管理的介绍与操作

    jdbcTemplate的入门 创建maven工程 此处省略 导入依赖 <!-- https://mvnrepository.com/artifact/org.springframework/s ...

  7. 控制台执行java找不到或无法加载主类

  8. NO.008-2018.02.13《折桂令·春情》元代:徐再思

    折桂令·春情_古诗文网   折桂令·春情 元代:徐再思 平生不会相思,才会相思,便害相思.生下来以后还不会相思,才刚刚懂了什么是相思,却深受着相思之苦. 身似浮云,心如飞絮,气若游丝.身像飘浮的云,心 ...

  9. RPMForge介绍及安装

    网站RPMForge介绍,安装 http://wiki.centos.org/AdditionalResources/Repositories/RPMForge#head-f0c3ecee3dbb40 ...

  10. linux命令之添加删除磁盘分区

    之前已经写过df和fdisk的区别了,df可以显示当前已经挂载的磁盘分区,df -T可以额外显示文件系统类型 fdisk -l可以显示出所有挂载未挂载的分区,但不显示文件类型 在我的虚拟机上有一块分配 ...