<!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可以显示出所有挂载未挂载的分区,但不显示文件类型 在我的虚拟机上有一块分配 ...