为了账号安全,请及时绑定邮箱和手机立即绑定

Vue.js 重复添加同一个类来创建“刚更新”的效果

Vue.js 重复添加同一个类来创建“刚更新”的效果

慕森卡 2021-06-28 12:19:46
目标:我有一个项目列表,当其中一个项目发生变化时,我想通过使其具有淡出为透明的黄色背景来引起用户的注意。我如何尝试这样做:我的 Vue 实例有一个items.每个项目都有一个属性,isChanged,这是一个布尔值,指示该项目是否已被界面中的某些操作更改。我已将一个类绑定到这些项目,以便当它们的isChanged属性为 true 时,highlight会添加该类。<ul v-for='item in items' :key='item.id'>    <li :class="{ 'highlight' : item.isChanged>{{ item.name }}</li></ul>highlight 类只是将背景更改为黄色,然后将其淡化为透明:.highlight {    animation: yellowfadingbox 4s;}@keyframes yellowfadingbox {    from {        background: @yellow;    }    to {        background: transparent;    }}因此,作为示例,我有一个方法updateItem可以进行 ajax 调用,并在调用完成后将该 itemsisChanged属性设置为 true。updateItem: function (itemKey) {            axios.get('/item/update', {                params: {                    id: id,                }            }).then(response => {                this.item[itemKey].isChanged = true;            });        }这样做的原因是它highlight向项目添加了适当的类,给了我想要的效果。但是,继续前进,highlight该类始终存在,因此我无法重新创建效果。我该如何解决这种方法/是否有更聪明的方法?
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 117 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信