代码拉取完成,页面将自动刷新
同步操作将从 高鹏/learn-vue 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。