写一个VUE代码实现SPA
<!DOCTYPE html>
<html>
<head>
<title>Single Page Application</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="page === 'home'">
<h1>Welcome to my SPA!</h1>
<button @click="page = 'about'">About</button>
<button @click="page = 'contact'">Contact</button>
</div>
<div v-if="page === 'about'">
<h1>About Us</h1>
<p>We are a team of developers who love building awesome web applications!</p>
<button @click="page = 'home'">Home</button>
<button @click="page = 'contact'">Contact</button>
</div>
<div v-if="page === 'contact'">
<h1>Contact Us</h1>
<p>Feel free to get in touch with us for any inquiries or suggestions!</p>
<button @click="page = 'home'">Home</button>
<button @click="page = 'about'">About</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
page: 'home'
}
})
</script>
</body>
</html>
<p>这是一个简单的SPA，采用Vue实现，页面有三个部分：主页、关于我们和联系我们。点击主页、关于我们和联系我们按钮可以在不刷新页面的情况下切换页面</p>
原文地址: https://www.cveoy.top/t/topic/e3dv 著作权归作者所有。请勿转载和采集!