<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组件之使用动态组件灵活设置页面布局</title>

    <script src="vue.js"></script>

</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>

    var hdInput = {

        template: "<div><input/></div>"

    };

    var hdTextarea = {

        template: "<div><textarea></textarea></div>"

    };

    new Vue({

        el: "#hdcms",

        components: {hdInput,hdTextarea},

        data:{

            formType:"hdInput"

        }

    });

</script>

</body>

</html>

　　

046——VUE中组件之使用动态组件灵活设置页面布局的更多相关文章

  1. 46.VUE学习之--组件之使用动态组件灵活设置页面布局

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

  2. 在vue中使用Element的message组件

    在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...

  3. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  4. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

  5. Vue 中渲染字符串形式的组件标签

    在vue中如果要渲染字符串形式的标签,vue 提供了 v-html 指令,可以很方便的渲染出来.但是如果这个标签是一个组件,或者element-ui 的组件时,就不能解析出来了,因为v-html 只能 ...

  6. 七、vue语法补充二（动态组件 & 异步组件、访问元素 & 组件、混入）

    1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...

  7. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  8. vue19 组建 Vue.extend component、组件模版、动态组件

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

  9. 【Vue中的swiper轮播组件】

    <template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...

随机推荐

  1. python操作redis详解

    https://www.cnblogs.com/koka24/p/5841826.html

  2. Python开发【Django】：缓存、信号

    缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache ...

  3. Maven安装（linux系统)

    解压: 修改配置: export JAVA_HOME=/usr/java/jdk1..0_80 export MAVEN_HOME=/software/apache-maven- export PAT ...

  4. 【Loadrunner】使用LoadRunner上传及下载文件

    使用LoadRunner上传及下载文件 1)LoadRunner上传文件 web_submit_data("importStudent.do", "Action=http ...

  5. 【spring mvc】基础概念

    1.容器 servlet容器 负责管理servlet生命周期. web容器–tomcat 负责管理和部署web应用,其本身可能具备servlet容器组件:如果没有,一般能将第三方servlet容器作为 ...

  6. 103-advanced-上下文

    上下文提供了一种通过组件树传递数据的方法,无需在每个级别手动传递道具. 在典型的React应用程序中,数据通过prop自上而下(父到子)传递,但对于应用程序中许多组件所需的某些类型的道具(例如场所偏好 ...

  7. 一个C#读写Dxf的类库DXFLibrary

    https://github.com/Titifonky/DXFLibrary DXF 参考手册: http://docs.autodesk.com/ACD/2011/CHS/filesDXF/WSf ...

  8. Python之迭代器及生成器

    一. 迭代器 1.1 什么是可迭代对象 字符串.列表.元组.字典.集合 都可以被for循环,说明他们都是可迭代的. 我们怎么来证明这一点呢? from collections import Itera ...

  9. centos7.3下ScyllaDB1.6安装

    转自:http://10710016.blog.51cto.com/10700016/1900483 ScyllaDB 安装配置 1.说明: scylladb支持centos7.2 64位 及以上版本 ...

  10. ABP常见问题

    System.Data.SqlClient.SqlException (0x80131904): 'OFFSET' 附近有语法错误 解决方案:最新的ABP默认支持的是sql2012以上的版本,对于之前 ...