<!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. mysql 大表优化

    当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 转自:https://segmentfault.com/a/1190000006158186 单表优化 除非单表数据未 ...

  2. hdu1286(找新朋友）&&POJ2407Relatives（欧拉函数模版题）

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 没什么好说的,模板题,主要是弄懂欧拉函数的思想. #include <iostream> #i ...

  3. 【Lua】面向对象编程（二）

      多重继承: module(...,package.seeall) local function search(k,plist) ,#plist do local v=plist[i][k] if ...

  4. 77. Combinations(回溯)

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...

  5. 20155310 2016-2017-2 《Java程序设计》第七周学习总结

    20155310 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 第十三章 时间与日期 认识时间与日期 •时间的度量 •GMT(格林威治标准时间):现在不是标 ...

  6. 20155239 2016-2017-2 《Java程序设计》第7周学习总结

    教材学习内容总结 1.了解Lambda语言 "Lambda 表达式"(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的 ...

  7. 免费美女视频聊天,多人视频会议功能加强版本(Fms3和Flex开发(附源码))

    Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第4篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/a ...

  8. 【转载】package-info

    本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...

  9. pyDay15

    内容来自廖雪峰的官方网站. 1.Python提供的sum()函数可以接受一个list并求和,请编写一个prod()函数,可以接受一个list并利用reduce()求积. from functools ...

  10. PHP设计模式_注册树模式

    通过注册树模式可以更加简单快捷的获取对象,在某个地方实例化了一个对象,可以将这个对象“保存”起来(放入可以全局使用的数组里),用的时候只需要提供 保存对象的时候 的那个标识即可,解决全局共享和交换对象 ...