vue—点击换一批就更换一批内容_请问如何用vue实现点击按钮更新图片的效果?...

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

代码如下:

{{guess}}

{{updata}}

@click="change"

class="detail-item"

v-for="item of changed"

:key="item.id"

>

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(){

}

}

}

@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