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

标签：util   eth   image   product   webpack   item   div   some   pat   

第一种

v-bind:class="{ active: item.isActive } v-on:click="doSomething"
active是样式名,内容是红色背景.
item.isActive在data中，为布尔值。
doSomething在methods中，对item.isActive取反.

第二种<div id="playPage" class="blur" v-bind:style="{backgroundImage: ‘url(‘ + albumpic_big + ‘)‘}">

第三种

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

在webpack打包后，路径不对，怎么办呢？

回答

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

第四种
<img :src="‘product/img?id=‘+imgObj.id+‘&thumbnail=true‘" alt="图片">

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

标签：util   eth   image   product   webpack   item   div   some   pat   

原文地址：http://www.cnblogs.com/dontes/p/7954467.html