<!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. Android应用开发基础之二：数据存储和界面展现（二）

    常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...

  2. WebLogic配置与部署

    一.创建域: 第一步,选择“开始菜单”-> “Oracle WebLogic”-> “WebLogic Server 10gR3” -> “Tools”-> “Configur ...

  3. ARM 虚拟机使用同一个公共 IP 访问公网的解决方案

    ARM 虚拟机使用同一个公共 IP 访问公网的解决方案 2017-2-21 作者 Azure 目前有两种部署模型:资源管理器 ARM 和经典部署模型 ASM.ASM 的虚拟机默认公用云服务的 VIP ...

  4. 2016微软技术大会Azure相关回顾

    3 天的时间稍纵即逝,伴随着本届大会压轴大奖的揭晓,2016 年度的微软技术大会完美落幕.以“数字化转型”为主题,来自微软全球的近百位顶尖技术专家.工程师和业务负责人拔冗而至,在 130 余场的专业技 ...

  5. 关于Visio的vba操作，遍历目录，对所有vsd文件操作，导入excel文件

    1.vba遍历要添加引用,runtime 2.不能打开单独的application,因为在获取到shape的picture属性时候,新打开的application不能够获取到.提示自动化错误. 3.定 ...

  6. [图]Windows 10 Build 16273版本更新发布：新增可变式字体Bahnschrift

    在经历了长达三周的等待之后,微软于今天终于面向Windows Insider项目的Fast通道用户发布了Windows 10 Build 16273版本更新.事实上,微软应该会在两周前就应该发布新版本 ...

  7. jquery表单

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

  8. March 20 2017 Week 12 Monday

    A goal is a dream with a deadline. 目标就是给梦想一个期限. Dream without dealine is just daydream, because you ...

  9. 找出OData service出错根源的小技巧

    SAP的Fiori应用是通过OData和后台交互的.在使用Fiori应用时您可能会遇到这样的错误消息: 这个错误消息没有包含有助于partner或者客户定位问题根源的线索. 下面是如何在后台找出问题根 ...

  10. Inner Join, Left Outer Join和Association的区别

    测试用的CDS视图的源代码,第8行用Inner Join连接TJ02T, 后者存放了所有系统状态的ID和描述. Inner Join测试结果:对于那些在TJ02T里没有维护描述信息的状态,它们不会出现 ...