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>

原文地址:https://www.cnblogs.com/angle-xiu/p/11748665.html

时间: 2024-10-09 16:48:58

vue实现组件切换的两种方式的相关文章

Unity实现绘制线断一 ————利用LineRenderer组件划线的两种方式

这几天,做项目的时候需要用到绘制线的功能,我之前做过划线的功能,总体来说就是三种方式,一种是LineRenderer组件,第二种是GL绘制线,第三种就是Vectrosity插件,他可以绘制各种各图形, 1.首先来说一下LineRenderer组件划线的方式,他需要添加LineRenderer组件,也就需要创建空对象,还的创建Plane,在Plane上画线. 第一种方式:  #region  ---- 划线     GameObject line;     LineRenderer wire;  

dataguard dg切换的两种方式

主备库的切换主要在两种情况下切换,Switchover和Failover,这两种切换都需要手工执行完成. 一是Switchover(计划中的切换,不会丢失数据) 二是Failover(当主库出现故障的时候需要主备库切换角色) 1,Switchover的切换方法 主库端: select switchover_status from v$database; 如果是to standby表可以正常切换. 直接执行alter database commit to switchover to physica

Vue 定义组件模板的七种方式(一般用单文件组件更好)

在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过示例介绍每个选项,并探讨利弊.以便你知道在任何特定情况下最适合的是哪一种. 1. 字符串 默认情况下,模板会被定义为一个字符串.我想我们的观点会达成一致:字符串中的模板是非常难以理解的.除了广泛的浏览器支持之外,这种方法没有太多用处. Vue.component('my-checkbox', { t

vue页面是否缓存的两种方式

第一种 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 配合路由 //在router文件加上meta判断 import Vue from 'vue' import

vue 页面跳转的两种方式

1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点击事件跳转    html : <button @click="hreftwo" class="test-one">点我到第二个页面</button>   js : methods:{ //跳转页面 hreftwo(){ this.$router

vue路由跳转的两种方式

query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失 一 . 声明式 router-link (利用标签跳转) 1.0 不带参数 形如:http://localhost:3000/#/home/newslist 2 3 // router.js 路由配置 4 { path: '

react做tab切换的几种方式

最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到.当然,你也可以在react当中用jquery或者zepto来实现,不过既然都用react了,能不能用jq,就尽量不用jq.不过不得不吐槽一下,在jquery很简单的东西,在react中稍微复杂化了一点. 目前我用到的tab切换只有两种方式,所以暂时总结这两种,以后有遇到其他的再总结. 第一种.只是子

vue组件通信的几种方式

最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 child.png 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 App2.png 4.保存修改的文件,查看浏览器 browser.png 5.我们依然可以对m

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content