首页 新闻 会员 周边 捐助

请问如何用vue实现点击按钮更新图片的效果?

0
悬赏园豆:30 [已解决问题] 解决于 2019-03-04 14:19

目前情况是只有切换或者刷新页面才会更新图片,怎么实现点击按钮也可以更换这三个图片呢?

代码如下:

<!-- -->
<template>
<div>
<header class="header">
<span>{{guess}}</span>
<span>{{updata}}</span>
</header>
<section class="container">
<div
@click="change"
class="detail-item"
v-for="item of changed"
:key="item.id"
>
<img :src="item.imgurl">
</div>
</section>
</div>
</template>

<script>

export default {
name:'LikeGuess',
data () {
return {
guess:'猜你喜欢',
updata:'换一批',
list:[{
id:'001',
imgurl:'../../../../../static/image/guess1.png'
},{
id:'002',
imgurl:'../../../../../static/image/guess2.png'
},{
id:'003',
imgurl:'../../../../../static/image/guess3.png'
},{
id:'004',
imgurl:'../../../../../static/image/guess4.png'
},{
id:'005',
imgurl:'../../../../../static/image/guess5.png'
},{
id:'006',
imgurl:'../../../../../static/image/guess6.png'
},{
id:'007',
imgurl:'../../../../../static/image/guess7.png'
},{
id:'008',
imgurl:'../../../../../static/image/guess8.png'
},{
id:'009',
imgurl:'../../../../../static/image/guess9.png'
}]
};
},
computed: {
changed:function(){
const r = Array.apply(null, { length: this.list.length })
.map((n, i) => i)
.map((n, i, all) => {
const j = i + Math.floor(Math.random() * (all.length - i));
const v = all[j];
all[j] = n;
return v;
})
.slice(0, 3)
.map(i => {
return this.list[i];
});
return r
}
},
methods: {
change:function(){

    }
}

}

</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
margin-top .4rem
padding 0 .2rem
font-size .24rem
display flex
justify-content space-between
span:last-child
color $Color
.container
padding .2rem .1rem
height 6.2rem
overflow hidden
.detail-item
padding .2rem
img
max-width 100%
max-height 100%
width auto
height auto

</style>

沧海的雨季的主页 沧海的雨季 | 初学一级 | 园豆:99
提问于:2019-03-04 00:54
< > 字节跳动旗下AI助手豆包
分享
最佳答案
0

显示的内容用另一个数组保存,点换一批就把内容换掉

收获园豆:30
microdot | 初学一级 |园豆:197 | 2019-03-04 09:13

具体咋换啊

沧海的雨季 | 园豆:99 (初学一级) | 2019-03-04 12:41

@沧海的雨季:
2个数组,一个数据源,一个用来显示,比如显示前3条,就把数据源前3条放到显示的数组里,要显示第二页,就把中间3条放进去

microdot | 园豆:197 (初学一级) | 2019-03-05 09:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top