<!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. matlab练习程序（演化策略ES）

    还是这本书上的内容,不过我看演化计算这一章是倒着看的,这里练习的算法正好和书中介绍的顺序是相反的. 演化策略是最古老的的演化算法之一,和上一篇DE算法类似,都是基于种群的随机演化产生最优解的算法. 算 ...

  2. Mantis去掉登录界面的“注册一个新账号”链接

    Mantis1.1.2主界面提供了新账号注册功能,但是只能注册默认权限的帐号.不是很实用,那就干脆去掉吧. (1) 打开Mantis目录下的login_page.php和lost_pwd_page.p ...

  3. Selenium2学习（二）-- 操作浏览器基本方法

    前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是web ...

  4. 笨办法学Python（三十八）

    习题 38: 阅读代码 现在去找一些 Python 代码阅读一下.你需要自己找代码,然后从中学习一些东西.你学到的东西已经足够让你看懂一些代码了,但你可能还无法理解这些代码的功能.这节课我要教给你的是 ...

  5. 一点一点学写Makefile(4) - 编译时指定宏参数

    我们在项目中有时为了方便会自定义一些与项目无关的功能,例如打印输出一些提示信息.将关键协议生成文件等,但是如果每次都通过修改代码的方法来实现,测试部门就会认为你改的这些代码可能会带来其他问题.对于这种 ...

  6. com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException 异常

    MySQL完整性约束破坏异常:com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException 在单向多对一关联关系 ...

  7. luogu P4168 [Violet]蒲公英

    嘟嘟嘟 分块经典题竟然是一道黑题…… 分块求区间众数的大体思想是对于询问区间[L, R],预处理出这中间的整块的众数,然后统计两边零散的数在[L, R]中出现的次数,最后取出现次数最多且最小的数. 因 ...

  8. 【luogu P3384 树链剖分】 模板

    题目链接:https://www.luogu.org/problemnew/show/P3384 诶又给自己留了个坑..不想写线段树一大理由之前的模板变量名太长 #include <cstdio ...

  9. android:TableLayout表格布局详解

    http://blog.csdn.net/justoneroad/article/details/6835915 这篇博文包括的内容:1.TableLayout简介2.TableLayout行列数的确 ...

  10. code First 四

    先从现有数据库获取代码:  我们创建模型的时候选择Code First就可以了 public ModelStudent() : base("name=ModelStudent") ...