Vue动态组件实现条件渲染和切换示例

作者:佚名 上传时间:2023-11-25 运行软件:Vue.js 软件版本:Vue 2.x 版权申诉

本示例演示了如何使用Vue动态组件实现条件渲染和切换功能。通过一个简单的应用场景,展示了动态加载组件的灵活性和便捷性。

<template>
  <div>
    <!-- 切换按钮 -->
    <button @click="toggleComponent">切换组件</button>

    <!-- 动态组件容器 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import FirstComponent from './components/FirstComponent.vue';
import SecondComponent from './components/SecondComponent.vue';

export default {
  data() {
    return {
      // 默认展示第一个组件
      currentComponent: 'first-component',
    };
  },
  methods: {
    toggleComponent() {
      // 根据当前组件切换到另一个组件
      this.currentComponent =
        this.currentComponent === 'first-component'
          ? 'second-component'
          : 'first-component';
    },
  },
};
</script>

免责申明:文章和图片全部来源于公开网络,如有侵权,请通知删除 server@dude6.com

用户评论
相关推荐
VueTab的操作
主要介绍了Vue切换Tab动态渲染组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
PDF
44.76KB
2020-12-31 11:32
Vue加载与
学习如何在Vue中通过动态组件实现异步加载与切换,提高页面性能。示例代码演示了如何使用Vue CLI和Vue 2.x版本,通过异步加载实现动态组件加载,并提供了代码注释和解释。
Vue 2.x
Vue CLI
2023-12-16 17:45
vue效数字
# 渲染动效数字组件说明 >引入 ShowNumber 方法 ```javascript import ShowNumber from '@/components/Number' ``` >
ZIP
17.91KB
2020-10-28 08:01
深入理解Vue列表
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
PDF
93.8KB
2020-10-28 06:23
React 更新的代码
主要介绍了React-组件渲染和更新的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
PDF
54.72KB
2021-01-17 01:59
vue选项卡效果
主要为大家详细介绍了vue动态组件实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
PDF
34.55KB
2020-09-25 07:09
Svelte中使用
本文针对Svelte 3.0.0+版本,介绍了如何使用动态组件及if else语句来实现Svelte项目的条件渲染,最后给出了示例代码。
Svelte 3.0.0+
Svelte
2023-03-26 04:54
Vue.js列表
此示例详细演示了Vue.js中如何使用v-for指令实现动态列表渲染以及如何使用v-if和v-else指令进行条件渲染。通过Vue.js的数据绑定,可以轻松管理和展示动态数据,使页面更加灵活和交互性。
Vue.js 2.x
Visual Studio Code
2023-11-26 08:08
Vue绑定:class样式
通过Vue.js的:class指令,可以轻松实现在前端应用中根据条件动态切换元素样式的功能。本示例展示了如何使用:class指令来实现条件样式切换,提高了前端开发的灵活性和交互性。
Vue.js 2.x
Vue CLI
2023-11-15 03:38
Svelte绑定
这个示例展示了Svelte框架中动态绑定和条件渲染的用法。通过点击按钮增加计数,并根据点击次数展示不同的内容,演示了Svelte的响应式和条件渲染特性。
Svelte 3.x
Svelte Playground
2023-12-07 16:20