Vue组件切换的两种方式

最新推荐文章于 2024-06-13 11:52:14 发布

一觉睡到自然醒_

最新推荐文章于 2024-06-13 11:52:14 发布

阅读量510

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44289981/article/details/106331195

版权

本文介绍了在Vue中实现组件切换的两种方法：一是利用v-if及其v-else指令，适用于简单的双组件切换；二是通过<component>标签结合v-bind:is属性，灵活地进行多组件切换，提供更强大的动态组件管理。

摘要由CSDN通过智能技术生成

1.v-if与它的v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染。如果使用了v-else，则会在v-if为false时执行v-else的语句
但只适合两个组件的切换

<body>
    <div id="app">
        <input type="button" value="v-if" @click="flag=true">
        <input type="button" value="v-else" @click="flag=false">
        <!-- 5，放置两个组件 -->
        <vif v-if="flag"></vif>
        <velse v-else="flag"></velse>
    </div>


    <!-- 3.设置template的内容 -->
    <template id

最低0.47元/天解锁文章

一觉睡到自然醒_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue组件切换的两种方式

1.v-if与它的v-elsev-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染。如果使用了v-else，则会在v-if为false时执行v-else的语句但只适合两个组件的切换<body> <div id="app"> <input type="button" value="v-if" @click="flag=true"> <input type="button" va
复制链接

扫一扫