我不是一个Web开发人员，这是我第一次玩Web框架-所以请对我宽容。我正在学习的框架是vue.js。第三版。
我努力实现的目标：
- 4个应用示例。（nav，defaultApp，bootstrapApp，vueApp）.
- 根据我选择的导航栏项目，其他3个应用程序之一应该显示。其他人会躲起来。
我在互联网上看了各种地方关于如何做到这一点，并添加了console.log（）输出，这使我相信，调用实际上发生了我认为他们应该。
我知道，有替代方案，但v-show方法对我来说似乎最可读。
什么是不工作：
- 这3个应用程序是可见的所有时间，从来没有得到隐藏。
这可能是我犯的一个非常愚蠢的错误。谁能发现它？
<!DOCTYPE html>
<html>
<head>
<title>Learning web framworks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"/>
<!-- TODO: Make sure to use the production build (*.prod.js) when deploying for production.<!-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<nav id="navbar" class="navbar navbar-dark navbar-expand-lg bg-dark">
<div class="container-fluid">
<a @click.prevent="showDefault" class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a @click.prevent="showBootstrap" class="nav-link" href="#">Bootstrap</a>
</li>
<li class="nav-item">
<a @click.prevent="showVue" class="nav-link" href="#">Vue.js</a>
</li>
</ul>
</div>
</nav>
<div v-show="isShow" id="default-content">
<p>default content</p>
</div>
<div v-show="isShow" id="bootstrap-content">
<p>bootstrap content</p>
</div>
<div v-show="isShow"
id="vue-content">
<p>vue content</p>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script>
const { createApp } = Vue
let defaultApp = createApp({
data() {
return {
isShow: true,
}
},
watch: {
isShow(val,oldVal) {
console.log(`defaultApp.isShow( ${oldVal} -> ${val} )`);
}
}
}).mount("#default-content");
let bootstrapApp = createApp({
data() {
return {
isShow: false,
}
},
watch: {
isShow(val,oldVal) {
console.log(`bootstrapApp.isShow( ${oldVal} -> ${val} )`);
}
}
}).mount("#bootstrap-content");
let vueApp = createApp({
data() {
return {
isShow: false,
}
},
watch: {
isShow(val,oldVal) {
console.log(`vueApp.isShow( ${oldVal} -> ${val} )`);
}
}
}).mount("#vue-content");
let nav = createApp({
data() {
return {
// pages: [
// { title: "Navbar", url: "#default-content" },
// { title: "Bootstrap", url: "#bootstrap-content" },
// { title: "Vue.js", url: "#vue-content" },
// ],
};
},
methods: {
showDefault: function() {
console.log("showDefault()");
defaultApp.$data.isShow = true;
bootstrapApp.$data.isShow = false;
vueApp.$data.isShow = false;
},
showBootstrap: function() {
console.log("showBootstrap()");
defaultApp.$data.isShow = false;
bootstrapApp.$data.isShow = true;
vueApp.$data.isShow = false;
},
showVue: function () {
console.log("showVue()");
defaultApp.$data.isShow = false;
bootstrapApp.$data.isShow = false;
vueApp.$data.isShow = true;
}
}
}).mount('#navbar');
</script>
</body>
</html>
3条答案
按热度按时间o8x7eapl1#
不要在应用程序的根元素上使用v-show-可能根本不将根元素视为“vue”应用程序的一部分，它只是应用程序的容器
相反，在内容上使用它
在您的示例中，只有
<p>，但您可能希望将实际内容 Package 在div或适当的ct3nt3jp2#
你使用多个应用程序有什么原因吗？您可以通过使用一个应用程序并将这些页面的可见性状态存储在其中来轻松解决这个问题。
7lrncoxx3#
您正在为所有三个示例（defaultApp、bootstrapApp和vueApp）使用相同的“isShow”数据属性。这意味着当您在一个应用示例中更新“isShow”时，它会影响所有三个应用示例，这就是为什么所有内容部分始终可见的原因。