<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
<body>
<div id="app">
<!-- 第一种方式：
<a href="" @click.prevent="flag=true">登录 </a> | <a href="" @click.prevent="flag=false">/ 注册</a>
<login v-if="flag"></login>
<register v-else></register> -->
<!-- 第二种方式：— -->
<!-- <button @click="flag=true">登录 </button> | <button @click="flag=false">/ 注册</button>
<component :is="flag ? 'login' :'register'"></component> -->
<!-- 第三种方式：— -->
<button @click.prevent="componentName='login'">登录 </button> | <button
@click.prevent="componentName='register'">/ 注册</button>
<transition>
<component :is="componentName"></component>
</transition>
</div>
<!-- 登录组件模板 -->
<template id="login">
<div>
<input type="text" placeholder="请输入用户名" v-model="username"><br>
<input type="password" placeholder="请输入密码" v-model="password"><br>
<button type="button" @click="login">登录</button>
</div>
</template>
<!-- 注册组件模板 -->
<template id="register">
<div>
<input type="text" placeholder="请输入用户名" v-model="username"><br>
<input type="password" placeholder="请输入密码" v-model="password"><br>
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label><br>
<button type="button" @click="register">注册</button>
</div>
</template>
<script src="vue.js"></script>
<!-- 注册组件注册 -->
<script>
Vue.component('register', {
template: '#register',
data() {
return {
username: '',
password: '',
sex: ''
}
},
methods: {
register() {
console.log(this.username, this.password, this.sex)
}
}
})
</script>
<!-- 登录组件注册 -->
<script>
Vue.component('login', {
template: '#login',
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
console.log(this.username, this.password)
}
}
})
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
flag: true,
componentName: 'login'
}
})
</script>
</body>
</html>
