有这样一个需求,如图分别是四个菜单按钮,这里的四个菜单图标不是类似Font Awesome的矢量图标,而是png格式的图片,分别是f.png、u.png、s.png、p.png。
需求:点击相应的图片,将会显示其对应的f_a.png的透明图片,在点击其他图片时(被点击的图片链接变换为 某_a.png 以此类推)同时原图片将还原成f.png。那么这里使用js如何实现呢?(不考虑矢量图标)
有这样一个需求,如图分别是四个菜单按钮,这里的四个菜单图标不是类似Font Awesome的矢量图标,而是png格式的图片,分别是f.png、u.png、s.png、p.png。
需求:点击相应的图片,将会显示其对应的f_a.png的透明图片,在点击其他图片时(被点击的图片链接变换为 某_a.png 以此类推)同时原图片将还原成f.png。那么这里使用js如何实现呢?(不考虑矢量图标)
每个图标一个class
.home {
background: url(f.png)
}
点击之后加上active类,去掉其他按钮的active类
.home.active {
background-img: url(f.png)
}
js
{
data() {
{
currentIndex: 0,
items: ['f.png', 'u.png', 's.png', 'p.png']
}
},
methods: {
getSrc(i) {
var src = this.items[i]
if (i === this.currentIndex) {
src = src.replace(/(?=.\.png)/, '_')
}
return src
}
}
}
template
<img v-for="(item,i) of items" :src="getSrc(i)" @click="currentIndex=i"/>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
我这里的
index
是外层函数传递的索引值