1 Star 0 Fork 8

杨泽洲/learn-vue

forked from 高鹏/learn-vue 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
demo_022.html 1.65 KB
一键复制 编辑 原始数据 按行查看 历史
F_喜欢足球 提交于 2020-03-26 11:23 . Vue切换组件的方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<a @click.prevent="cname='loginComponent'">去登录</a>
<a @click.prevent="cname='registerComponent'">去注册</a>
<a @click.prevent="cname='menuComponent'">去菜单</a>
<!--
component元素是Vue中定义好的一个元素
该元素的作用,等价于挖了一个坑,我们可以在这个坑中填组件!
到底填什么组件,就有is属性决定,is属性后面写哪个组件的名字,在component这个位置显示什么组件
-->
<component :is="cname"></component>
</div>
<template id="t1">
<div>
<h3>登录UI</h3>
</div>
</template>
<template id="t2">
<div>
<h3>注册UI</h3>
</div>
</template>
<template id="t3">
<div>
<h3>菜单UI</h3>
</div>
</template>
<script>
// 组件之间的切换。
var app = new Vue({
el: "#app",
data: {
cname: "loginComponent"
},
components: {
"loginComponent": {
template: "#t1"
},
"registerComponent": {
template: "#t2"
},
"menuComponent": {
template: "#t3"
}
}
});
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/yang-zezhou/learn-vue.git
git@gitee.com:yang-zezhou/learn-vue.git
yang-zezhou
learn-vue
learn-vue
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385