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

Posted dontes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中改变背景图,实现点击切换效果相关的知识,希望对你有一定的参考价值。

第一种

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中改变背景图,实现点击切换效果的主要内容,如果未能解决你的问题,请参考以下文章

用vue写一个轮播图效果

Vue.js实现tab切换效果

在vue中使用Echarts绘制叠堆折线面积图(可切换叠堆柱状图)

vue2 3d 切换器

用Vue实现点击一个按钮,实现切换样式的效果

Vue案例:图片动态切换效果