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

有网友碰到过这样的问题:请问如何用vue实现点击按钮更新图片的效果?,问题详细内容为:

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

代码如下:

<!-- -->

<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>

前端vue,我搜你通过互联网收集了相关的一些解决方案,希望对有过相同或者相似问题的网友提供帮助,具体如下:

网友提供的解决方案1:

显示的内容用另一个数组保存,点换一批就把内容换掉收获园豆:30

============================================

具体咋换啊

============================================

@沧海的雨季:

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

vue.js中,在一个vue组件中,想通过点击按钮,才加...

答: { data: { showcom: false } methods: { onclick: function () { this.showcom = true; } } } Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心...

在vue.js 使用百度分享按钮 需要每次刷新才能生效

答:具体代码如下:代码描述:上面的preview()方法,会返回一个对象returnrst;,返回的rst对象打算在submit()方法中使用。这个rst对象在控制台打印是这样的:问题:一共有3个问题,问题1和2是关于submit()方法的这一行代码:问题2:要把返回的rst对象...

vue.js中,在一个vue组件中,想通过点击按钮,才加...

答:参见官方vue-router,组件化开发,就是你想要的模式。 export default{ } 导出组件化管理,你先看手册,看完你就明白了

用vue怎么做点击按钮时 同时显示正确和错误答案

答:你示例代码中的show等于是vm变量啊,想在slot-scope里面控制应该是跟相应列的数据绑定才可以,用vm变量就成了整个表格全部按钮显示隐藏了。 你可以给表格的源数据每项都加上show属性,el-button根据scope.row.show来处理显示隐藏,click回调里面...

vue.js 中文字图标能不能做点击按钮

答:font-icon是用css来引入的 而vue.js是js框架 你应该在css中引入font-icon 在vue的html文件中引入css就可以了

同一个按钮实现升降排序,用vue怎么做?

答:楼上说的没错,但是楼上理解错了提问者的问题角度。 我大概能猜出来提问者要做的需求,应该是后台管理系统的条件筛选查询,给提问者个思路,既然是同一个按钮,那么就需要在data里面定义一个变量isAsc,为true表示现在处于升序,反之降序,如果...

用vuejs怎么给提交按钮添加监听事件改变文字内容以...

答:在事件驱动的框架下,不应该考虑到某个dom从而对其进行操作。前面的回答者简单的对你的问题进行了解决。我给你提供一个常规的处理方法。 在你点击提交的时候,会触发提交请求,那么这个时候就应该改变按钮内容,在ajax完成后(无论成功失败),...

vue.js把后端传的一张图片加自己本地生成的一张二...

答:2600 PGE overshoot 电梯冲停层位置 , 与加速度 , 加加速度高关 .

vue-router组件里面点击一个按钮跳转到一个新的组...

答:直接修改地址栏中的路由地址即可: {{msg}} var testLogin = Vue.component("login",{ template:` 这是我的登录页面 ` }) var testRegister = Vue.component("register",{ template:` 这是我的注册页面 ` }) //配置路由词典 //对象数组 const my...

如何用 vue 点击table的行内编辑按钮后 直接对该行...

答:网页 资讯 贴吧 知道 视频 音乐 图片 地图 文库 更多»搜索答案 我要提问 如何用 vue 点击table的行内编辑按钮后 直接对该行进行编辑 首页...

使用vue实现点击按钮滑出面板的实现代码

怎么通过组件之间的通信完成点击事件。 index.vue文件中: <div> <el-button type... 以上所述是小编给大家介绍的使用vue实现点击按钮滑出面板的实现代码,希望对大家有...

vue 点击按钮实现动态挂载子组件的方法

Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个“子类... 实现点击按钮动态添加li的方法Vue.js实现按钮的动态绑定效果及实现代码

vue怎么用ajax实现下拉框效果

加载和显示新数据在vue里最简单了,往你的数据中添加新的值就可以了: methods: { loa... { this.items.push(moreData); }.bind(this)); } } 另外一个问题就是如何触发loadMore,这里...

如何使用 vue transition 实现 ios 按钮一样的平滑切换效果

VUE做画数都摄像机画数用做CG场景要逼真画山树 都随风抖VUE功能启植物随风摆效;于水流说困难VUE物理力 系统基本没没粒系统所流体困难至通材质实现流体画看起实 真...

基于vue.js实现图片轮播效果

轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg...

vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现

首先在app.vue里面有这么一段<router-view class="router-view" ></router-view> 然后你所点击的按钮其实是这个东西<router-link :to=""></r...

如何用 Vue 实现前端

前端权限控制并不是新生事物,早在后端 MVC 时代,web 系统中就已经普遍存在对按钮和菜单的显示 / 隐藏控制,只不过当时它们是由后端程序员在 jsp 或者 php 模板中实现的。...

vue.js中,在一个vue组件中,想通过点击按钮,才加载另外一个目标...

<button @click='onclick'></button><div><mycomponent v-if='showcom'&... API 实现响应的数据绑定和组合的视图组件[1]  。Vue.js 自身不是一个全能框架—...

如何用vue实现模态框组件

ode].modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1001; -webkit-overflow-scrolling: touch; outline: 0; overflow: scroll; margin: 30/@rate auto; } .modal-dialog { p...

如何用vue实现二级菜单栏

二级菜单导航是一种很普遍的功能,一般网页都会有这个功能。如果是平常的做法就是改变url,跳到相应的页面;还有一种就是frame。 如果用vue的话,可以用vue-router改变<ro...

请注意,本站信息均收集自互联网,相关信息仅供参考,医疗等重要信息请以正规途径为最终意见,本站不承担任何责任!