vue实现组件切换的两种方式
2024-08-26 21:37:10
<!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>
最新文章
- iOS从零开始学习直播之3.美颜
- MyBatis的初始化方式
- C# BackgroundWorker的使用 转
- c语言编程之栈(数组实现)
- nyoj 1870 愚人节礼物
- HDU 2517 棋盘分割
- Hadoop--Map/Reduce实现多表链接
- 做了五套登录页，晒一下 自己比较满意的~ oh yeh~
- I have a dream
- linux-shell脚本命令之sed
- MySQLdb的安装与使用
- 【Zookeeper】源码分析之Leader选举（二）
- .Neter玩转Linux系列之一：初识Linux
- Oracle RMAN备份与还原
- ubuntu oracle 环境搭建
- Spring Boot(十二)：Spring Boot 如何测试打包部署
- you boot volume has only 0 byte size
- 一次执行批量sql的方法
- Oracle安装时出错，TNS-04612 :"XXX"的RHS 为空
- Unity初探之黑暗之光(1)