vue中改变背景图,实现点击切换效果

第一种

v-bind:class="{ active: item.isActive } v-on:click="doSomething"

active是样式名,内容是红色背景.

item.isActive在data中,为布尔值。

doSomething在methods中,对item.isActive取反.

第二种<div >

第三种

在.vue文件中的CSS样式中,使用背景图

在webpack打包后,路径不对,怎么办呢?

回答

如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: ‘../../‘

第四种

<img :src="'product/img?&thumbnail=true'" alt="图片">