Vue中组件切换的2种方式

最新推荐文章于 2024-05-15 17:05:35 发布
最新推荐文章于 2024-05-15 17:05:35 发布
阅读量420 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45616246/article/details/105497291
版权

请陛下批阅

方式1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件切换方式1</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <button @click="flag = true">登录</button>
    <button @click="flag = false">注册</button>
    <login v-if="flag"></login>
    <register v-else></register>
</div>
</body>
<script>
    Vue.component('login', {
        template: `<h2>登录组件</h2>`
    });

    Vue.component('register', {
        template: `<h2>注册组件</h2>`
    });
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    });
</script>
</html>

方式2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件切换方式2</title>
    <script src="../../vue/vue-v2.6.11.js"></script>

</head>
<body>
<div id="app">
    <button @click="comName = 'login'">登录</button>
    <button @click="comName = 'register'">注册</button>

    <component :is="comName"></component>
    <!--目前已经学习的vue提供的标签有:
        transition  transition-group    template    component
    -->
</div>
</body>
<script>
    Vue.component('login', {
        template: `<h2>登录组件</h2>`
    });

    Vue.component('register', {
        template: `<h2>注册组件</h2>`
    });
    var vm = new Vue({
        el: '#app',
        data: {
            'comName': 'login'
        }
    });
</script>
</html>
键盘的打工仔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue从一个组件跳转到另一个组件页面router-link的试用
weixin_30498807的博客
06-08 4470
需求从helloworld.vue页面跳到good.vue页面 1.helloworld.vue页面代码 <template> <div class="hello"> 我是小可爱 <router-link :to="{ path: '/cute'}" replace>点我啊,傻</router-li...
Vue中处理组件切换的三种方式
xiaohanbaby的博客
09-23 3873
Vue中处理组件切换的三种方式： 1.v-if切换： v-if的方式来切换视图:创建和销毁(导致组件的状态不能留存) 2.v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态) 3.动态组件切换： 可以操作DOM, 并且可以留存下数据; 切换时触发的生命周期： 激活activated 冻结 deactivated 这两个方法; 用keep-alive可保存组件的状态 代码示例: <template> <div> <butt
vue点击跳转到另一个组件页面，应该如何配置路由？
weixin_42055163的博客
08-13 5674
注意：子路由是在当前路由组件上添加内容 ，同级路由是替换当前路由组件这样应该好理解了吧， 也就是说如果是子路由的话，只是往原来的组件上加东西，是替换掉当前组件的话，直接配置同级路由 ...
2024年用Vue框架实现一个tab栏，切换不同的图片。，阿里终面通过率
最新发布
2401_84434301的博客
05-15 381
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总。
vue点击子组件,父组件达到实时切换效果
weixin_64747231的博客
09-16 1275
vue点击子组件,父组件达到实时切换效果
Vue.js 组件切换的方式
C.
02-24 4419
文章目录使用`flag`标识符结合`v-if`和`v-else`切换组件使用`:is`属性来切换不同的子组件组件切换动画 使用flag标识符结合v-if和v-else切换组件 页面结构： &lt;div id="app"&gt; &lt;input type="button" value="toggle" @click="flag=!flag"&gt; &lt;my-c
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
通过结合使用`<keep-alive>`和`localStorage`，我们可以有效地在Vue中实现组件切换后的数据保留以及页面刷新或跳转时的数据恢复。这种方式极大地提升了用户体验，让用户在多次访问或操作后仍然能找回他们之前的状态...
Vue切换Tab动态渲染组件的操作
10-14
主要介绍了Vue切换Tab动态渲染组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 实现用户登录方式的切换功能
10-15
首先，我们需要在Vue组件的数据（data）选项中定义一个标识符`loginWay`，用于存储当前登录方式的状态。这里，我们设`loginWay`为`true`表示用户选择的是短信登录，而`false`则表示密码登录。如下所示： ```...
Vue2.0 多 Tab切换组件的封装实例
08-29
" Vue2.0 多 Tab切换组件的封装实例" 本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例，通过对Tab切换...Vue2.0 多 Tab切换组件的封装实例提供了一种灵活、可扩展的解决方案，满足日常需求，具有良好的应用前景。
vue中英文切换实例代码
10-15
本文将详细介绍如何在Vue项目中实现中英文切换的实例。 首先，我们需要安装 `vue-i18n` 这个依赖。在终端中，可以使用 `yarn` 或 `npm` 来安装： ```bash yarn add vue-i18n # 或者 npm install vue-i18n --save-...
Vue.js实现tab切换效果
热门推荐
Coding_Jia的博客
05-24 5万+
Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API，能够让开发者在开发web应用的时候更加简易便捷。实际上，一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉，因为Vue是数据驱动，不需要手动操作DOM。他通过一些特殊的hmtl语法，将DOM和数据绑定起来。一旦创建了绑定，DOM就会和数据保持同步，每当变更了
Vue中组件的切换
ZZY1078689276的专栏
11-04 5391
文章目录示例源码结果分析   此处的组件切换使用的是Vue中的component组件中的is属性来实现的。该is属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。 示例 源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
Vue学习记录--定义局部子组件以及组件切换
小灰狼与大白兔的博客
02-22 8565
使用components属性定义局部子组件 组件实例定义方式： &lt;script&gt; // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { // 定义子组件 account:...
vue中绑定键盘事件,实现按下键盘上下键实现li标签背景色的切换小demo
业余前端的职业经历
05-07 3710
大概就是实现一个这样的功能,键盘按下上下键,li标签红色背景可以上下切换哈 因为朋友工作中碰见的一个小问题,最后写一个简单的小demo <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="j...
Vue 父组件调用子组件，子组件调用父组件，动态切换组件找不到子组件的解决办法
wafangdianwangning的博客
07-14 2277
前端最近加班加跑了，我一个java开发就担起了前端开发的重任，用的还是我从来没用过的vue 于是看了看文档跟angular有点相似的其实，但是在组件切换的地方花了不少时间研究 一。想把一个页面分成好多个组件拼起来，实现局部刷新的那种效果， 这是父页面，点击父组件中的搜索栏组件，搜索栏组件调用父组件的列表组件，搜索和列表是兄弟组件 这里我用子调父再调子的方式 把父组件的这个方法当作...
vue中组件的切换方式
程序员徐小白的博客
02-10 784
方式一 使用v-if和v-else实现切换 定义组件 Vue.component('myTag1',Vue.extend({ template:'<p>tag1</p>' })) Vue.component('myTag2',Vue.extend({ template:'<p>tag2</p>' })) 增加flag var...
vue2中函数式组件切换
次顶级的博客
02-17 320
根据传入组件名称，展示不同组件 .js文件，使用时和vue组件文件一样，引入，注册组件，标签使用 import ConversationTpl from './ConversationTpl.vue' import ProblemTpl from './ProblemTpl.vue' import SharesTpl from './SharesTpl.vue' import FileCommentTpl from './FileCommentTpl.vue' import CollectionTpl
vue2动态组件切换方法
07-25
Vue 2 中切换动态组件有多种方法。以下是其中几种常见的方法： 1. 使用 `<component>` 元素配合动态绑定的 `is` 属性： ```html <component :is="componentName"></component> ``` 在 Vue 实例中，通过修改 `componentName` 的值，可以动态切换展示的组件。 2. 使用 `v-if` 和 `v-else` 指令： ```html <template v-if="isComponentA"> <component-a></component-a> </template> <template v-else> <component-b></component-b> </template> ``` 通过修改 `isComponentA` 的值，可以在两个模板之间进行切换。 3. 使用动态组件的 `<keep-alive>` 缓存组件状态： ```html <keep-alive> <component :is="componentName"></component> </keep-alive> ``` 在这种情况下，切换组件时，之前已经加载过的组件会被缓存，以便后续快速切换回来。 这些方法可以根据你的具体需求选择适合的方式来切换动态组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值