<!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. eclipse spring boot项目部署

    选中项目------>右键----->Run As------>Manven bulid-->填写Name:XXX; Goals:clean package -Dmaven.t ...

  2. github代码上传教程

    github 上传代码步骤 一.git以及Github Git是个正快速成长的版本控制系统,它由GitHub维护. 优势: 1.支持离线开发,离线Repository. 2.强大的分支功能,适合多个独 ...

  3. supersocket 通过配置文件启动服务 总是 初始化失败的 解决办法

    <serverTypes> <add name="APPServerType" type="TMPServer.APP.APPServer, TMPSe ...

  4. centos下安装lnmp各个版本的几种方法

    首先我们用一种yum的方法安装,我们需要rpm源 默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | g ...

  5. python+pymssql+selenium 获取短信验证码登录(实战练习)

    登录页面输入手机号, 获取短信验证码(验证码有10分钟有效期) 1 连接sql server数据库,获取10分钟之内的有效短信验证码 2 页面输入手机号,并获取验证码.若存在有效验证码则输入验证码,若 ...

  6. Windos下Android（ADT Bundle）配置NDK的两种方法------ADT、Cygwin、NDK配置汇总(转)

    转自:http://blog.csdn.net/yanzi1225627/article/details/16897877 Android开发环境由windows下ADT Bundle搭建,且按前文h ...

  7. 塔防cocos2d

    塔防游戏,类似于保卫萝卜的一种. 需要注意的是几点问题是: 游戏地图是瓦片地图,设置特定的标记,用来标记哪些点是地图点,哪些是塔点. 游戏关卡选择:需要在两个cpp文件传参,用的是静态成员变量. 每一 ...

  8. 2018.11.18 Sturts2配置详解&常量配置进阶

    1.基于struts.xml 的节点参数配置 package节点 action节点 result节点 include节点 2.struts常量配置以及如何修改为自己的想要的配置 2.1struts默认 ...

  9. PHP处理数组和XML之间的互相转换

    PHP将数组转换成XML PHP可以将数组转换成xml格式,简单的办法是遍历数组,然后将数组的key/value转换成xml节点,再直接echo输出了,如: function arrayToXml($ ...

  10. Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...