<!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. 词频统计 in office

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

  2. android的一些类库的优缺点

    经过本人的面试经验,以及接触的android项目,总结了一下android的一些类库的优缺点: 一,线程方面 1.AsyncTask 首先是线程优化以及缺陷方面,针对目前大多数类库来说,都有好的设计方 ...

  3. CentOS 6.4下Squid代理服务器的安装与配置(转)

    add by zhj: 其实我们主要还是关注它在服务器端使用时,充当反向代理和静态数据缓存.至于普通代理和透明代理,其实相当于客户端做的事,和服务端没有什么关系.另外,Squid的缓存主要是缓存在硬盘 ...

  4. 如何区分不同用户——Cookie/Session机制详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  5. ubuntu 搭建ftp服务器,可以通过浏览器访问,filezilla上传文件等功能

    搭建ftp服务器 1:首先,更新软件源,保证源是最新的,这样有利于下面在线通过apt-get install命令安装ftp. 2:使用sudo apt-get install vsftp命令安装vsf ...

  6. Mybatis的CRUD案例

    一.Mybatis增删改查案例 上一节<Mybatis入门和简单Demo>讲了如何Mybatis的由来,工作流程和一个简单的插入案例,本节主要继上一讲完整的展示Mybatis的CRUD操作 ...

  7. Mybatis使用generatedKey在插入数据时返回自增id始终为1,自增id实际返回到原对象当中的问题排查

    今天在使用数据库的时候,遇到一个场景,即在插入数据完成后需要返回此数据对应的自增主键id,但是在使用Mybatis中的generatedKey且确认各项配置均正确无误的情况下,每次插入成功后,返回的都 ...

  8. poj1177 Picture 矩形周长并

    地址:http://poj.org/problem?id=1177 题目: Picture Time Limit: 2000MS   Memory Limit: 10000K Total Submis ...

  9. python 中读取yaml

    YAML 是专门用来写配置文件的语言,非常简洁和强大,远比 JSON 格式方便. YAML在python语言中有PyYAML安装包. YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类 ...

  10. P1351 联合权值(树形dp)

    P1351 联合权值 想刷道水题还交了3次.....丢人 (1.没想到有两个点都是儿子的状况 2.到处乱%(大雾)) 先dfs一遍处理出父亲$fa[x]$ 蓝后再一遍dfs,搞搞就出来了. #incl ...