<template> <div class="container"> <div class="box" @click="detail1"> <img src="../../assets/homepage.png"/>首页 </div> <div class="box" @click="detail4"> <img src="../../assets/about.png"/>关于 </div> </div> </template>
时间: 2023-10-08 15:03:53 浏览: 46
这是一个 Vue.js 的模板代码,其中使用了 `<template>` 标签来定义模板内容。
模板中包含一个 class 为 container 的 div 元素,该元素包含两个 class 为 box 的子元素。每个子元素都绑定了一个点击事件,当用户点击该元素时,会触发对应的方法 `detail1` 或 `detail4`。
其中,`<img>` 标签用于显示图片,`src` 属性指定了图片的路径。路径中的 `../../` 表示返回两级目录,因此图片路径应该是相对于模板文件的。
总的来说,这段模板代码用于渲染一个包含两个方框的容器,每个方框包含一张图片和一个文本标签,当用户点击方框时,会触发相应的事件方法。
相关问题
<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>¥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template>这是GoodsDetail01,<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>¥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template>这是GoodsDetail02,这是<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>这是goodslist商品主页,实现goodslist点击跳转到GoodsDetail01和GoodsDetail02,请用动态组件实现跳转,写出vue.app和goodslist代码
Vue.app代码如下:
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
```
goodslist代码如下:
```html
<template>
<div>
<h2>商品列表</h2>
<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>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import GoodsDetail01 from "./GoodsDetail01.vue";
import GoodsDetail02 from "./GoodsDetail02.vue";
export default {
name: "GoodsList",
components: {
GoodsDetail01,
GoodsDetail02,
},
data() {
return {
products: [
{
id: 1,
name: "商品1",
price: 100,
image: "https://via.placeholder.com/150",
},
{
id: 2,
name: "商品2",
price: 200,
image: "https://via.placeholder.com/150",
},
],
currentComponent: "",
};
},
methods: {
handleClick(id) {
if (id === 1) {
this.currentComponent = "GoodsDetail01";
} else if (id === 2) {
this.currentComponent = "GoodsDetail02";
}
},
},
};
</script>
```
goodslist主页<template > <div class="product-wrap" @click="handleClick"> <div class="product" v-for="product in products" :key="product.id"> <img :src="product.image" alt="" > <div> <span>{{ product.name }}</span> <h4>¥{{ product.price }}</h4> </div> </div> </div> </template>,<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>¥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template> goodsdetail01页,<template> <div class="container"> <div class="detail-wrap"> <img :src="imgSrc" alt=""> <div> <h1>{{ msg }}</h1> <p><span>¥</span><span>{{ price }}</span></p> <div><input type="number" v-model="num"></div> <button v-on:click="addToCart">加入购物车</button> </div> </div> </div> </template>GoodsDetail02页,实现主页点击列表图片跳转到其余两页,不能用路由实现
可以使用Vue的动态组件来实现。
在goodslist主页的模板中,给product-wrap添加一个@click事件,将点击事件绑定到一个方法handleClick上,方法中通过传递参数来决定渲染哪个组件。
```
<template>
<div class="product-wrap" @click="handleClick">
<div class="product" v-for="product in products" :key="product.id">
<img :src="product.image" alt="" >
<div>
<span>{{ product.name }}</span>
<h4>¥{{ product.price }}</h4>
</div>
</div>
</div>
</template>
<script>
import GoodsDetail01 from './GoodsDetail01.vue';
import GoodsDetail02 from './GoodsDetail02.vue';
export default {
data() {
return {
products: [
{ id: 1, name: '商品1', price: 100, image: 'img1.jpg' },
{ id: 2, name: '商品2', price: 200, image: 'img2.jpg' },
{ id: 3, name: '商品3', price: 300, image: 'img3.jpg' },
],
};
},
methods: {
handleClick(product) {
if (product.id === 1) { // 根据商品id来判断渲染哪个组件
this.$root.$emit('change-component', GoodsDetail01);
} else if (product.id === 2) {
this.$root.$emit('change-component', GoodsDetail02);
}
},
},
};
</script>
```
在主页的script标签中,定义两个组件GoodsDetail01和GoodsDetail02,并在methods中绑定change-component事件来动态切换组件。
```
<script>
import GoodsDetail01 from './GoodsDetail01.vue';
import GoodsDetail02 from './GoodsDetail02.vue';
export default {
components: {
GoodsDetail01,
GoodsDetail02,
},
data() {
return {
currentComponent: null,
};
},
created() {
this.$root.$on('change-component', (component) => {
this.currentComponent = component;
});
},
};
</script>
```
在主页的模板中,使用动态组件来渲染当前的组件。
```
<template>
<div>
<div class="product-wrap" @click="handleClick">
<div class="product" v-for="product in products" :key="product.id">
<img :src="product.image" alt="" >
<div>
<span>{{ product.name }}</span>
<h4>¥{{ product.price }}</h4>
</div>
</div>
</div>
<component :is="currentComponent"></component>
</div>
</template>
```
这样,就可以在点击主页的商品列表图片时,动态切换到对应的商品详情页,实现了跳转的效果。