vue实现组件切换的两种方式
<!DOCTYPE html>
<html>
<head>
<title>组件的切换</title>
<meta charset="utf-8">
</head>
<body>
<!-- 方式一:结合v-if及v-else 只能实现两个组件的切换-->
<div id="app">
<!-- 添加事件修饰符prevent，阻止跳转 -->
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<!-- 方式二：使用vue提供的元素component 可实现多个组件的切换-->
<div id="app2">
<a href="" @click.prevent="comName=login">登录</a>
<a href="" @click.prevent="comName=register">注册</a>
<!-- vue提供的元素，来展示对应名称的组件 -->
<!-- component是一个占位符，:is属性是指定组件的名称 -->
<component :is="comName"></component>
</div>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
Vue.component("login",{
template:"<h3>登录组件</h3>"
})
Vue.component("register",{
template:"<h3>注册组件</h3>"
})
let vm = new Vue({
el:"#app",
data:{
flag:false
}
});
let vm2 = new Vue({
el:"#app2",
data:{
comName:"login"
}
})
</script>
</html>
vue实现组件切换的两种方式的更多相关文章
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- DRF 序列化组件 序列化的两种方式 反序列化 反序列化的校验
序列化组件 django自带的有序列化组件不过不可控不建议使用(了解) from django.core import serializers class Books(APIView): def ge ...
- vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
- Vue 定义组件模板的七种方式(一般用单文件组件更好)
在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过 ...
- vue页面是否缓存的两种方式
第一种 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> ...
- Vue - 引入本地图片的两种方式
第一种,只引入单个图片,这种引入方法在异步中引入则会报错. 比如需要遍历出很多图片展示时 <image :src = require('图片的路径') /> 第二种,可引入多个图片,也可引 ...
- vue 页面跳转的两种方式
1,标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- [Android]解决3gwap联网失败：联网请求在设置代理与直连两种方式的切换
[Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...
随机推荐
- 一、jenkins下载及安装
一.安装 官网地址:https://jenkins.io/zh/ 1.下载war包,放到tomcat——>webapps下,双击bin——>startup.bat启动 2.打开命令提示符. ...
- Linux 在 TOP 命令中切换内存的显示单位
顶部的内存信息可以在top运行时按E切换,每次切换转换率为1000,只是没有单位,切换的单位为 k,m,g,t,p: 1. 2. 3., 4. 底下的进程信息按e切换,每次切换转换率为1000,切换的 ...
- Python“文件操作”Excel篇（上）
大家好,我们今天来一起探索一下用Python怎么操作Excel文件.与word文件的操作库python-docx类似,Python也有专门的库为Excel文件的操作提供支持,这些库包括xlrd.xlw ...
- 0.9.0.RELEASE版本的spring cloud alibaba sentinel限流、降级处理实例
先看服务提供方的,我们在原来的sentinel实例(参见0.9.0.RELEASE版本的spring cloud alibaba sentinel实例)上加上限流.降级处理,三板斧只需在最后那一斧co ...
- Spring cloud微服务安全实战-3-8API安全机制之Https
Https访问 1.验证双方的身份. 2.一旦建立连接,对数据进行封装加密 这里先生成一个自己自签的证书,不是第三方颁发的,第三方颁发的要花钱. 第二是做一些配置,让程序支持https 安装了java ...
- ES6深入浅出-11 ES6新增的API（上）-1.Object.assign
这些都是es6才有的 Object.assign 在a加上三个属性 分别是p1\p2\p3 以前是这么去加 b的三个属性p1.p2.p3就全部复制到a这个对象上了. 把后面的东西放到前面的东西上 两个 ...
- 【438】Python 处理文件
1. 读取文件,计算 tweets 数目 python中readline判断文件读取结束的方法 line == '' python:如何检查一行是否为空行 line == '\n' or line = ...
- 报错：WARN [WorkerSender[myid=1]:QuorumCnxManager@584] - Cannot open channel to 2 at election address /x.x.x.x:3888
报错背景: zookeeper安装完成之后,启动之后正常,但是查看log文件zookeeper.log时发现报错. 报错现象: -- ::, [myid:] - INFO [WorkerSender[ ...
- jQuery 属性操作 - toggleClass() 方法
实例 对设置和移除所有 元素的 "main" 类进行切换: $("button").click(function(){ $("p").tog ...
- PAT 甲级 1065 A+B and C (64bit) (20 分)(溢出判断)*
1065 A+B and C (64bit) (20 分) Given three integers A, B and C in [−], you are supposed to tell whe ...