<!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. Create an Index

    db.collection.createIndex( { name: -1 } ) Indexes — MongoDB Manual https://docs.mongodb.com/manual/i ...

  2. 词频统计 in office

    ROSTCM6 1. http://www.writewords.org.uk/word_count.asp 2. http://darylkinsman.ca/tools/wordfreq.shtm ...

  3. JS实现数字千位符格式化方法

    /** * [number_format 参数说明:] * @param {[type]} number [number:要格式化的数字] * @param {[type]} decimals [de ...

  4. Python开发【模块】：logging日志

    logging模块 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式 ...

  5. Python多进程编程（转）

    原文:http://www.cnblogs.com/kaituorensheng/p/4445418.html 阅读目录 1. Process 2. Lock 3. Semaphore 4. Even ...

  6. loki之内存池SmallObj[原创]

    loki库之内存池SmallObj 介绍 loki库的内存池实现主要在文件smallobj中,顾名思义它的优势主要在小对象的分配与释放上,loki库是基于策略的方法实现的,简单的说就是把某个类通过模板 ...

  7. python装饰器的应用案例

    目录 一.过程编程 二.面向装饰器和函数的编程 三.二的加强版 一.过程编程 (一)需求:打印菱形 1.空格.*号组成的菱形 2.输入菱形上半部分的行数即可打印 3.支持循环输入 (二)代码 from ...

  8. mysql 数据操作 单表查询 concat_ws() 定义显示格式

    有个需求用concat以这种格式打印查询 mysql> select concat(name,':',age) from employee; +----------------------+ | ...

  9. mysql 数据操作 单表查询 group by 聚合函数 没有group by情况下

    聚合函数只能用在组里使用 #没有group by 则默认算作一组 取出所有员工的最高工资 mysql> select max(salary) from employee; +---------- ...

  10. java 多线程 day18 ThreadPoolExecutor

    http://blog.csdn.net/lipc_/article/details/52025993 https://www.cnblogs.com/trust-freedom/p/6681948. ...