19 Vue组件切换及设置切换动画

组件切换

A 双组件切换

使用v-ifv-else指令进行双组件切换。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登录a>
        <a href="" @click.prevent="flag=false">注册a>
        
        <login v-if="flag">login>
        <regist v-else="flag">regist>
    div>

    <template id="templ">
        <div>
            <h3>登录组件h3>
        div>
    template>

    <template id="temp2">
        <div>
            <h3>注册组件h3>
        div>
    template>
    <script>
        Vue.component("login", {
            template: "#templ",
            data() {
                return {
                }
            }
        })
        Vue.component("regist", {
            template: "#temp2",
            data() {
                return {

                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true
            }
        })
    script>
body>

html>

B 使用component标签实现切换


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件切换2title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

head>

<body>
    <div id="app">
        <a href="" @click.prevent="comp='login'">登录a>
        <a href="" @click.prevent="comp='regist'">注册a>
        <component :is="comp">component>
    div>
    <template id="templ">
        <div>
            <h3>登录组件h3>
        div>
    template>

    <template id="temp2">
        <div>
            <h3>注册组件h3>
        div>
    template>
    <script>
        // 组件
        Vue.component("login", {
            template: "#templ",
            data() {
                return {
                }
            }
        })
        Vue.component("regist", {
            template: "#temp2",
            data() {
                return {
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                comp: "login"
            }
        })
    script>
body>

html>

注意component标签中的:is属性值为组件名称字符串。

C 组件切换动画

组件添加动画十分简单,只需要添加transition标签并设置mode值即可。


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件切换2title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.8s ease;
        }
    style>
head>

<body>
    <div id="app">
        <a href="" @click.prevent="comp='login'">登录a>
        <a href="" @click.prevent="comp='regist'">注册a>
        <transition mode="out-in">
            <component :is="comp">component>
        transition>

    div>
    <template id="templ">
        <div>
            <h3>登录组件h3>
        div>
    template>

    <template id="temp2">
        <div>
            <h3>注册组件h3>
        div>
    template>
    <script>
        // 组件
        Vue.component("login", {
            template: "#templ",
            data() {
                return {
                }
            }
        })
        Vue.component("regist", {
            template: "#temp2",
            data() {
                return {
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                comp: "login"
            }
        })
    script>
body>

html>

你可能感兴趣的:(Vue)