您的位置：首页 > Web前端 > Vue.js

Vue-组件4 组件切换

2020-01-13 04:52 267 查看

Vue-组件4 组件切换

一、组件切换方式1—component元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<style>
.comSty {
border: 1px solid black;
width: 255px;
padding: 10px;
}
.labelSty {
width:80px;
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<!--        4 两个超链接，用来切换组件-->
<a href="" @click.prevent="showComId='login'">登录</a>
<a href="" @click.prevent="showComId='register'">注册</a>
<!--        5 用component元素来显示组件，is属性为显示组件的id-->
<component :is="showComId"></component>
</div>

<!--    1.定义两个组件模板，登录和注册-->
<!--        1.1 登录组件模板-->
<template id="tmp-login">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<button>登录</button>
</div>
</template>

<!--    1.2 注册组件模板-->
<template id="tmp-registered">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<label for="password" class="labelSty">确认密码：</label><input id="password" type="password"><br>
<button>注册</button>
</div>
</template>
<script>
// 2 创建组件
// 2.1 应用登录组件模板
Vue.component('login', {
template: '#tmp-login'
})
// 2.2 应用注册组件模板
Vue.component('register', {
template: '#tmp-registered'
})

var vm = new Vue({
el: '#app',
data: {
showComId: 'login'  // 3 定义当前组件id
},
methods: {}
})
</script>
</body>
</html>

二、给组件添加动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<style>
.comSty {
border: 1px solid black;
width: 255px;
padding: 10px;
}
.labelSty {
width:80px;
display: inline-block;
}

.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px);
}

.v-enter-active,
.v-leave-avtive {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<!--        4 两个超链接，用来切换组件-->
<a href="" @click.prevent="showComId='login'">登录</a>
<a href="" @click.prevent="showComId='register'">注册</a>
<!--        5 用component元素来显示组件，is属性为显示组件的id-->
<!--        使用transition来设置动画，mode="out-in"为先退出再进入-->
<transition mode="out-in">
<component :is="showComId"></component>
</transition>
</div>

<!--    1.定义两个组件模板，登录和注册-->
<!--        1.1 登录组件模板-->
<template id="tmp-login">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<button>登录</button>
</div>
</template>

<!--    1.2 注册组件模板-->
<template id="tmp-registered">
<div class="comSty">
<label for="username" class="labelSty">用户名：</label><input id="username" type="text"><br>
<label for="password" class="labelSty">密码：</label><input id="password" type="password"><br>
<label for="password" class="labelSty">确认密码：</label><input id="password" type="password"><br>
<button>注册</button>
</div>
</template>
<script>
// 2 创建组件
// 2.1 应用登录组件模板
Vue.component('login', {
template: '#tmp-login'
})
// 2.2 应用注册组件模板
Vue.component('register', {
template: '#tmp-registered'
})

var vm = new Vue({
el: '#app',
data: {
showComId: 'login'  // 3 定义当前组件id
},
methods: {}
})
</script>
</body>
</html>
更新时间：2019-12-21
  • 点赞
  • 收藏
  • 分享
  • 文章举报
SevenSongyun 发布了30 篇原创文章 · 获赞 0 · 访问量 208 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航