这是一个简单的点菜界面的示例代码，使用了Vue3和Vue Router。下面是一个HTML文件中的代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点菜界面</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script>
const Home = { template: '<div><h2>欢迎光临</h2><router-link to="/menu">点菜</router-link></div>' }
const Menu = { template: '<div><h2>菜单</h2><ul><li v-for="(item, index) in menu" :key="index">{{ item.name }} - {{ item.price }}</li></ul></div>', data() { return { menu: [] } }, mounted() { // 假设从后端获取菜单数据 this.menu = [{ name: '炒饭', price: 20 }, { name: '鱼香肉丝', price: 30 }, { name: '宫保鸡丁', price: 40 }] } }
const Order = { template: '<div><h2>我的订单</h2><ul><li v-for="(item, index) in order" :key="index">{{ item.name }} - {{ item.price }}</li></ul></div>', data() { return { order: [] } }, mounted() { // 订单数据可以从其他页面传递过来，这里仅作演示 this.order = [{ name: '炒饭', price: 20 }] } }
const routes = [
{ path: '/', component: Home },
{ path: '/menu', component: Menu },
{ path: '/order', component: Order }
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes
})
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
</script>
</body>
</html>
扫一扫
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
