<!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. Selenium 2.0 以后不在必须Selenium server了

    does not require the Selenium Server to automate the browser.这个句话,解决了我很的疑惑,新版Selenium 可以直接操作浏览器了,还可以 ...

  2. 服务器bios&raid管理

    新服务器配置流程 https://github.com/alces-software/knowledgebase/wiki/server-dell-rseries-r630 dell DTK(sysc ...

  3. Laravel 单元测试-模拟认证的用户

    在 Laravel 编写单元测试时经常会遇到需要模拟认证用户的时候,比如新建文章.创建订单等,那么在 Laravel unit test 中如何来实现呢? 官方解决方法 Laravel 的官方文档中的 ...

  4. matlab中换行

    若在命令窗口中,如果一条语句已经写完,需要换行,可以用"Shift+Enter", 如果一条语句没写完就想换行,可以使用"...+Enter".

  5. myeclipse 阿里巴巴java开发规范

    今天发现阿里巴巴搞了个java开发规范,然后火了: 然后发现我也整了一下: 阿里巴巴java开发规范宣传页: http://mp.weixin.qq.com/s/IbibsXlWHlM59kfXJqR ...

  6. [EffectiveC++]item31：将文件间的编译依存关系降至最低

    P143:“声明的依赖性"替换“定义的依存性”

  7. 遍历目录树 - Unicode 模式

    =info     遍历目录树 支持 Unicode     Code by 523066680@163.com     2017-03         V0.5 使用Win32API判断目录硬链接 ...

  8. 团队第三次scrum

    长大一条龙之课表查询 一.设计概要 本次内容主要是实现了长大一条龙系统的课表查询功能,我们的这个项目严格遵守MVC架构,采用前后端分离的策略.我们将课表查询分为二层,DAO层:负责与数据进行交互,读写 ...

  9. 最简单的nginx教程 - 如何把一个web应用部署到nginx上

    Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Ра ...

  10. IOS 播放视频（MPMoviePlayerController、MPMoviePlayerViewController）

    ● iOS提供了叫 做MPMoviePlayerController.MPMoviePlayerViewController的两个 类,可以用来轻松播放视频 ➢ YouTobe就是用MPMoviePl ...