Use flagthe identifier in combination v-ifand v-elseswitching component
-
Page structure :( disadvantages: Only applies to switching between the two components, a plurality of unsuitable)
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<my-com1 v-if="flag"></my-com1>
<my-com2 v-else="flag"></my-com2>
</div>
-
Vue instance definition:
<Script>
Vue.component ( 'myCom1', {
Template: '<H3> Pa forth </ h3>'
}) Vue.component ( 'myCom2', { Template: '<H3> Pa wave Ben </ h3> ' }) // create Vue instance, to give the ViewModel var Vue new new VM = ({ EL:' #app ', Data: { In Flag: to true }, Methods: {} }); </ Script>
Use :isproperty to switch between different sub-components, and adding animation switching
-
Examples of the component is defined by:
// Log assembly
const = Vue.extend Login ({
Template: `<div>
<H3> Log assembly </ H3>
</ div>`
});
Vue.component ( 'Login', Login); // Register assembly const = Vue.extend Register ({ Template: `<div> <H3> register component </ H3> </ div>` }); Vue.component ( 'Register', Register); // Create instance Vue, to give the ViewModel var Vue new new VM = ({ EL: '#app', Data: {comName: 'Login'}, Methods: {} });
-
Use
componentlabels to refer to a component by:isspecify the component to be loaded properties:
<div id="app">
<a href="#" @click.prevent="comName='login'">登录</a>
<a href="#" @click.prevent="comName='register'">注册</a>
<hr>
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
-
Adding to switch styles:
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,
.v-leave-active {
position: absolute;
transition: all 0.3s ease;
}
h3{
margin: 0;
}
</style>
Components switching animation
1. Package together with transition labels, defined mode
2. Define the animation style
<!DOCTYPE html>
<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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'"> Register </a> <! - attribute through mode, when the mode setting switch components -> <! - If no mode attribute, a component is not completely go out, a new switching assembly came in, so went wrong -> <= Transition MODE "in-OUT"> <component: iS = "comName"> </ component> </ Transition> </ div> <Script> // component name string Vue.component ( 'Login', { Template: '<H3> Log assembly </ H3>' }) Vue.component ( 'Register' , { Template: '<H3> register component </ h3>' }) // Create Vue instance, to give the ViewModel var Vue new new VM = ({ EL: '#app', Data: { comName: 'Login' // current component in the: name of the component is bound
},
methods: {}
});
</script>
</body>
</html>