goodslist商品主页点击跳转到goodsdetail01和goodsdetail02,不能用路由写出vue.app和goodslist全部代码 - CSDN文库", "datePublished": "2023-06-17", "keywords": " goodslist商品主页点击跳转到goodsdetail01和goodsdetail02,不能用路由写出vue.app和goodslist全部代码", "description": "文章浏览阅读179次。这里是一个简单的实现，包含了 Vue 实例、GoodsList 组件和 GoodsDetail01/02 组件的代码：```html " }

<template > <div class="product-wrap" > <div class="product" v-for="product in products" :key="product.id" @click="handleClick(product.id)"> <img :src="product.image" alt="" > <div> <span>{{ product.name }}</span> <h4>￥{{ product.price }}</h4> </div> <component :is="currentComponent"></component> </div> </div> </template> <script> export default { name: 'GoodsList', data() { return { products: [ { id: 'GoodsDetail01', name: '多普勒效应马克杯', price: 35.50, image: require('../assets/1_DopplerEffect_多普勒效应_White.png') }, { id: 'GoodsDetail02', name: '透镜成像公式马克杯', price: 40.99, image: require('../assets/3_LensEquation_透镜成像公式_White.png') }, { id: 3, name: '黑洞温度马克杯', price: 32.00, image: require('../assets/5_BlackHoleTemperature_黑洞温度_White.png') }, { id: 4, name: '爱因斯坦场方程马克杯', price: 45.00, image: require('../assets/6_EinsteinFieldEquations_爱因斯坦场方程_White.png') } ], currentComponent: null } }, methods:{ // handleClick(){ // this.$emit('click', 'GoodsDetail01') //点击后跳转到 GoodsDetail01 页面 // } handleClick(id) { this.currentComponent = id } } } </script> <style> .product-wrap { width: 1200px; margin: 50px auto; display: flex; justify-content: space-between } .product { border: 1px solid #ececee; border-radius: 5px; cursor: pointer; transition: .5s; } .product:hover { border: 1px solid #979797; box-shadow: 0px 0px 7px #979797; } .product img { width: 270px; padding: 10px; border-bottom: 1px solid #ececee; } .product>div { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } </style>goodslist商品主页点击跳转到goodsdetail01和goodsdetail02,不能用路由写出vue.app和goodslist全部代码

时间: 2023-06-17 21:07:27 浏览: 179

这里是一个简单的实现，包含了 Vue 实例、GoodsList 组件和 GoodsDetail01/02 组件的代码： ```html  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GoodsList</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <goods-list></goods-list> </div> <template id="goods-list"> <div class="product-wrap"> <div class="product" v-for="product in products" :key="product.id" @click="handleClick(product.id)"> <img :src="product.image" alt=""> <div> <span>{{ product.name }}</span> <h4>￥{{ product.price }}</h4> </div> </div> </div> </template> <template id="goods-detail-01"> <div> <h2>Goods Detail 01</h2> <button @click="$emit('back')">Back</button> </div> </template> <template id="goods-detail-02"> <div> <h2>Goods Detail 02</h2> <button @click="$emit('back')">Back</button> </div> </template> <script> Vue.component('goods-list', { template: '#goods-list', data() { return { products: [ { id: 'GoodsDetail01', name: '多普勒效应马克杯', price: 35.50, image: require('../assets/1_DopplerEffect_多普勒效应_White.png') }, { id: 'GoodsDetail02', name: '透镜成像公式马克杯', price: 40.99, image: require('../assets/3_LensEquation_透镜成像公式_White.png') }, { id: 3, name: '黑洞温度马克杯', price: 32.00, image: require('../assets/5_BlackHoleTemperature_黑洞温度_White.png') }, { id: 4, name: '爱因斯坦场方程马克杯', price: 45.00, image: require('../assets/6_EinsteinFieldEquations_爱因斯坦场方程_White.png') } ], currentComponent: null } }, methods: { handleClick(id) { if (id === 'GoodsDetail01') { this.currentComponent = 'goods-detail-01' } else if (id === 'GoodsDetail02') { this.currentComponent = 'goods-detail-02' } } } }) Vue.component('goods-detail-01', { template: '#goods-detail-01' }) Vue.component('goods-detail-02', { template: '#goods-detail-02' }) new Vue({ el: '#app' }) </script> <style> .product-wrap { width: 1200px; margin: 50px auto; display: flex; justify-content: space-between; } .product { border: 1px solid #ececee; border-radius: 5px; cursor: pointer; transition: .5s; } .product:hover { border: 1px solid #979797; box-shadow: 0px 0px 7px #979797; } .product img { width: 270px; padding: 10px; border-bottom: 1px solid #ececee; } .product > div { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } </style> </body> </html> ``` 这里没有使用路由，而是根据点击的商品 ID，动态渲染不同的组件。点击后会进入 GoodsDetail01 或 GoodsDetail02 组件，通过 `back` 事件返回主页。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通