vue做完添加操作后,组件刷新操作该怎么实现?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue做完添加操作后,组件刷新操作该怎么实现?相关的知识,希望对你有一定的参考价值。
当我在页面上添加完一个数据后,再次点添加,上面会出现我上一次添加的数据,我该怎么把上一次的数据刷新掉;我想要的结果是每次做添加操作时,弹出的组件上不会出现上一次我添加过后的数字。
感觉你这个是一个弹框之类的控件吧,其实没多复杂,当你点击添加按钮的时候,把弹框或者添加信息的盒子中,在data里绑定的数据都让它们等于一个空字符串就可以了。 参考技术A 把上次添加的数据主动清除掉不就行了 参考技术B vue是基于数据驱动的,你不要想着怎么让页面怎么样,要想着数据模型里的数据怎么样,你不需要在UI中显示的内容,要在data中删去,要新出现的内容,要在data中添加,vue会自动感知数据变化,生成ui,这是vue存在的意义。添加/刷新后,vue组件的高亮和淡入淡出效果
【中文标题】添加/刷新后,vue组件的高亮和淡入淡出效果【英文标题】:HIghlight and fade effect for vue component as soon as added/refreshed 【发布时间】:2018-10-10 06:59:48 【问题描述】:如何在加载后立即在 vue 组件上实现高亮效果并在一段时间后淡出效果。也许 5 秒后。
当您发布问题或提交答案等时,可以在堆栈溢出中找到此行为。
我尝试了如下 vue sn-p 所示的哔声效果,它每 500 毫秒闪烁一次:
<template>
<div>
<div class="row" style="height:300px;" :class="'highlightBody': highlight, 'highlightBeep': highlight && beepLight" >
<!-- <chart-panel></chart-panel> // Will use chart component-->
</div>
</div>
</template>
<script>
export default
name: 'hightlight-div',
data ()
return
highlight: true,
beepLight: false,
,
mounted ()
this.$nextTick(() =>
let ct = 0
let interval = setInterval(() =>
if (ct === 10)
clearInterval(interval)
interval = null
this.highlight = false
this.beepLight = !this.beepLight
ct++
, 500)
)
</script>
<style lang="scss" scoped>
.highlightBody
background: #fffbe9 !important;
border: 1px solid #dcc76a;
.highlightBeep
background: #F5F5F5 !important;
</style>
但我想要类似于 stack-over flow 的效果(从深色背景淡入淡色)。
我必须在不使用 Jquery 的情况下实现此行为。 任何建议都将不胜感激。
【问题讨论】:
你试过什么?请用您的代码向我们展示一个基本的、最小的示例。见how to ask 和how to create a minimal, concrete and verifiable example (MCVE)。 @Terry 我已经更新了我的基本代码。请看一下。 【参考方案1】:我可以用下面的 sn-p 解决渐隐效果和哔哔声效果:
<template>
<div>
<div class="row" :class="'highlightBody': !beepLight, 'highlightBeep': beepLight" style="height:300px;" >
Beep
</div>
<div class="row" style="height:300px;" :style="`background: #$highlightColor !important;`" >
Fede Away
</div>
</div>
</template>
<script>
function colorShades (color, percent)
var num = parseInt(color, 16)
var amt = Math.round(2.55 * percent)
var R = (num >> 16) + amt
var B = (num >> 8 & 0x00FF) + amt
var G = (num & 0x0000FF) + amt
return (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1)
export default
name: 'hightlight-div',
data ()
return
beepLight: false,
highlightColor: 'ffff94'
,
mounted ()
this.$nextTick(() =>
let ct = 0
let interval = setInterval(() =>
this.highlightColor = colorShades('ffff94', ct * 4)
this.beepLight = !this.beepLight
ct++
if (ct === 10)
clearInterval(interval)
interval = null
this.highlightColor = 'ffffff'
, 500)
)
</script>
<style lang="scss" scoped>
.highlightBody
background: #fffbe9 !important;
border: 1px solid #dcc76a;
.highlightBeep
background: #fffbe9 !important;
</style>
您可以查看jsfiddle
【讨论】:
以上是关于vue做完添加操作后,组件刷新操作该怎么实现?的主要内容,如果未能解决你的问题,请参考以下文章