vue动态加载不同的组件（分内部和外部组件）
<!DOCTYPE html>
<html> <head>
<title> hello world vue </title>
<meta charset="utf-8" />
</head> <body>
<div id="app" v-cloak>
<!-- 缺省挂载 currentView 变量指定的组件 -->
<component :is="currentView"></component>
<button @click="handleChangeView('A')">A</button>
<button @click="handleChangeView('B')">B</button>
<button @click="handleChangeView('C')">C</button>
<button @click="handleChangeViewHome()">Home</button>
</div>
</body> </html> <script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script> <script>
$(document).ready(function() { });
</script> <script>
Vue.component('Home', {
template: '<div> 外部组件 </div>',
props: {},
data: function() {
return {}
},
methods: {}
}); var app = new Vue({
el: '#app',
data: {
currentView: 'comA'
},
computed: {},
methods: {
handleChangeView: function(x) {
this.currentView = 'com' + x;
},
handleChangeViewHome: function() {
this.currentView = 'Home';
}
},
components: {
comA: {
template: '<div>组件A</div>'
},
comB: {
template: '<div>组件B</div>'
},
comC: {
template: '<div>组件C</div>'
}
},
mounted: function() {}
});
</script>
vue动态加载不同的组件（分内部和外部组件）的更多相关文章
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...
- vue实践---vue动态加载组件
开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- vue动态加载图片，取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- Vue动态加载图片图片不显示
图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...
- vue 动态加载图片路径报错解决方法
最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...
- vue动态加载图片
如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...
随机推荐
- WINDOWS 命令行调用SAS代码 并指定输出路径 示例
ECHO "设置SAS.EXE 路径" SET PATH=D:\Program Files\SASHome\SASFoundation\9.4\SAS.EXE echo " ...
- ModuleNotFoundError: No module named 'pymysql'
出现此提示表示系统中没有安装PyMySQL,可以通过pip PyMySQL进行安装. 安装之后,执行import pymysql仍然不可用! why? 检查后发现系统中存在python2与python ...
- asp.netCore3.0 中使用app.UseMvc() 配置路由
一.新配置路由策略 在 Asp.Net Core 3.0中默认不再支持app.UserMvc() 方式配置路由 系统. 而是使用新的模式,点击查看asp.netCore3.0区域和路由配置变化 默认 ...
- wordpress 本地环境安装
1. 下载xmapp 2. 安装mysql 3. 启动xmapp的数据库与Apache,通常无法启动原因. mac的先关闭自己的数据库,系统偏好设置-MySQL Apache的端口默认是80,一般会被 ...
- mstar安卓智能电视方案源代码常用修改
优先 替换 Supernova\projects\customerinfo\inc\Customer_Info.h替换 内核中linux/drivers/mmc/core/mmc.c文件 1, key ...
- 段地址机制以及段地址转换触发segmentation falt
推动存储管理方式从固定分区到动态分区分配,进而又发展到分页存储管理方式的主要动力是提高内存利用率.可以实现一个内存用于多个程序同时执行而不会发生地址冲突.引入分段存储管理方式的目的,则主要是为了满足用 ...
- centos7没有ifconfig命令解决办法
输入ifconfig 提示不存在 首先确认下是否是环境变量没有ifconfig 引起. ls /sbin/ifconfig 以上确定了系统是没有安装ifconfig,下面我们来安装 yum i ...
- LocalDate/LocalDateTime/LocalTime与Date的互转
// 01. java.util.Date --> java.time.LocalDateTime public void UDateToLocalDateTime() { java.util. ...
- 均值为1的独立指数随机Y1,Y2,组合成的Y=Y1-(Y2-1)^2/2 在Y>0的条件下也是指数随机变量
均值为1的独立指数随机Y1,Y2,组合成的Y=Y1-(Y2-1)^2/2 在Y>0的条件下也是指数随机变量 另一个条件分布 13题有错误,应该是P{x<X<x+dx,y<Y& ...
- Error-ASP.NET：此 SqlTransaction 已完成；它再也无法使用。
ylbtech-Error-ASP.NET:此 SqlTransaction 已完成:它再也无法使用. 1.返回顶部 1. “/”应用程序中的服务器错误. 此 SqlTransaction 已完成: ...