46.VUE学习之--组件之使用动态组件灵活设置页面布局
<!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学习之--组件之使用动态组件灵活设置页面布局的更多相关文章
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue19 组建 Vue.extend component、组件模版、动态组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- AntDesign vue学习笔记(四)使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- Vue进阶(Bus/作用域slot/动态组件)
一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过pro ...
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局
[本文出自天外归云的博客园] 需求图示如下,多级纵向动态表头表格: 我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的.多级的.纵向的表头: <template ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- 学习笔记:Vue——动态组件&异步组件
动态组件 01.在动态组件上使用keep-alive,保持组件的状态,以避免反复重渲染导致的性能问题. <!-- 失活的组件将会被缓存!--> <keep-alive> < ...
随机推荐
- 我的Android开发之路——ListView的使用
在Android开发过程中,遇到需要列表显示的时候,这时候就会用到listview. 1.首先创建一个ListViewTest项目,选择empty activity类型.修改activity_main ...
- [转载]AMOLED结构详解,BOE专家给你分析驱动补偿
关键词: AMOLED, 驱动补偿 有机发光显示二极管(OLED)作为一种电流型发光器件已越来越多地被应用于高性能显示中.由于它自发光的特性,与LCD相比,AMOLED具有高对比度.超轻薄.可弯曲等诸 ...
- GET来传递数据的实例
实例 下面实例是一点典型的使用GET来传递数据的实例: 客户端请求: GET /hello.txt HTTP/1.1 User-Agent: curl/7.16.3 libcurl/7.16.3 Op ...
- nginx http强制跳转https
通过nginx的rewrite 进行301永久重定向,参考如下配置即可. server { listen 192.168.1.111:80; server_name test.com; rewrit ...
- bind 详解
请看我的有道云笔记: http://note.youdao.com/noteshare?id=eaf4194473cf4294776fbc263ffe6b89&sub=5CB214C594E0 ...
- C++中临时对象的产生与优化
看到了几篇讲的不错的博客,这里收集起来 不明白的地方互相参考 https://blog.csdn.net/fangqingan_java/article/details/9320769 https:/ ...
- Python的免费在线学习课程
网上资源不是本人的,所以,只是转发.其它的不负责 http://www.imooc.com/learn/177
- ACM/ICPC 2018亚洲区预选赛北京赛站网络赛 B Tomb Raider 【二进制枚举】
任意门:http://hihocoder.com/problemset/problem/1829 Tomb Raider 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 L ...
- Docker 安装tomcat7
[root@VM_0_7_centos ~]# docker pull tomcat:7-jre7 [root@VM_0_7_centos ~]# docker run -di --name=tomc ...
- 【洛谷P3811】[模板]乘法逆元
乘法逆元 题目链接 求逆元的三种方式: 1.扩欧 i*x≡1 (mod p) 可以化为:x*i+y*p=1 exgcd求x即可 inline void exgcd(int a,int b,int &a ...