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做完添加操作后,组件刷新操作该怎么实现?的主要内容,如果未能解决你的问题,请参考以下文章

vue-router复用组件时不刷新数据

Vue实现父子组件页面刷新的常用方法

Vue实现父子组件页面刷新的常用方法

android 下拉刷新怎么实现

关于vue强制刷新

添加/刷新后,vue组件的高亮和淡入淡出效果