vue component动态组件
2023-09-11 14:20:08 时间
下面看下vue component动态组件(详情看vue.js官网动态组件)
动态组件
通过component标签 的is属性来进行组件的切换
is的属性值决定要显示的组件,所以将is的属性值设置为data中的值,以便于动态变化
1
2
3
4
5
6
7
|
<template> <div class= "app" > <component :is= "组件名称" > </component> </div> </template> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>动态组件</title> <script src= "bower_components/vue/dist/vue.js" ></script> <style> </style> </head> <body> <div id= "box" > <input type= "button" @click= "a='aaa'" value= "aaa组件" > <input type= "button" @click= "a='bbb'" value= "bbb组件" > <component :is= "a" ></component> <!-- 动态组件--> </div> <script> var vm= new Vue({ el: '#box' , data:{ a: 'aaa' }, components:{ 'aaa' :{ template: '<h2>我是aaa组件</h2>' }, 'bbb' :{ template: '<h2>我是bbb组件</h2>' } } }); </script> </body> </html> |
相关文章
- vue 项目要使用的库
- vue-webpack快速建立项目模板
- 浅谈 vue实例 和 vue组件
- vue框架-基础3-vue-component组件化开发
- 2-前端vue
- Vue调用后端接口http ajax请求组件封装及proxyTable跨域问题解决超详细案例
- SAP Fiori和Vue的结合会给企业级应用软件的UI开发带来什么?
- Atitit easyui翻页组件与vue的集成解决方案attilax总结
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- 声纹可视化工具:wavesurfer.js---在Vue中使用音频声纹可视化插件wavesurfer.js【已封装成组件有完整demo实例附完整代码】
- vue学习:xmg vue学习笔记1/14代码案例
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)
- vue中,选中多个选项,并且使其高亮
- Vue中组件化编码 完成任务的添加、删除、统计、勾选需求(实战练习三完结)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue父组件向子组件动态传值的两种方法
- Vue拖拽组件
- 229:vue+openlayers解决setText不能立即更新文字的问题
- 224:vue+openlayers 绘制一个多边形,避免线段交叉,drawend有交叉提示并重绘
- 083:vue+openlayers 地点搜索定位 (代码示例)
- 025:vue+openlayers读取WKT数据显示图形(代码示例)
- 045:vue+openlayers利用canvas clip实现左卷帘功能(代码示例)
- Vue组件间通信方式都有哪些?
- 【三十天精通Vue 3】 第三天 Vue 3的组件详解
- Vue的基本组件2(show,bind)
- Vue: vue-router路由