<img :src="imgSrc" @click="img">
时间: 2023-07-21 14:37:30 浏览: 66
这是Vue.js中一个关于图片展示和点击事件的代码片段。其中":src"是v-bind指令的简写形式,表示将Vue实例中的imgSrc数据绑定到img元素的src属性上,实现动态渲染图片。"@click"是v-on指令的简写形式,表示绑定点击事件,当用户点击img元素时,触发Vue实例中的img方法。通常,img方法用于实现图片的放大和缩小等交互效果。
相关问题
<div class="top"> <img src="@/assets/qiehuan_dark.png" alt="" v-if="theme == 'chalk'" @click="changetheme" /> <img src="@/assets/qiehuan_light.png" alt="" v-else @click="changetheme" /> <span>2019-01-01 00:00:00</span> </div> </div> <div class="main" ref="main"> <div class="left"> <div class="fulltrend" :class="{ full: flag1 }"> <trend class="trend" ref="trend2"> </trend> <div class="iconfont icon-expand-alt icon" @click="fullscreen1" v-if="!flag1" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen1" v-else ></div> </div>优化后代码
<div class="top">
<img
:src="theme == 'chalk' ? '@/assets/qiehuan_dark.png' : '@/assets/qiehuan_light.png'"
alt=""
@click="changetheme"
/>
<span>2019-01-01 00:00:00</span>
</div>
<div class="main" ref="main">
<div class="left">
<div class="fulltrend" :class="{ full: flag1 }">
<trend class="trend" ref="trend2"></trend>
<div class="iconfont icon-expand-alt icon" @click="fullscreen1" v-if="!flag1"></div>
<div class="iconfont icon-compress-alt icon" @click="smallscreen1" v-else></div>
</div>
</div>
</div>
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>
```
这样,就可以在点击主页的商品列表图片时,动态切换到对应的商品详情页,实现了跳转的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
const activeIndex=Vue.ref(0);
// console.log(activeIndex.valuea);
function toggleActive(index){
if(activeIndex.value===index){
activeIndex.value=null;
}else{
activeIndex.value=index;
console.log(activeIndex);
console.log(activeIndex.value);
}
const lis =document.querySelectorAll(".clearfix li")
for(let i=0;i{{option.category_title}}
和
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
实现tab切换
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)