在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue2如何實現(xiàn)數(shù)組的某一項變化，給這一項添加臨時特效

vue2如何實現(xiàn)數(shù)組的某一項變化，給這一項添加臨時特效

很簡單的一段代碼：

<body>
    <ul id="app">
        <li v-for="item in list" class="alert alert-danger">{{item}}</li>
    </ul>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[1,2,3]
            },
            mounted:function () {
                var vm = this;
                setTimeout(function () {
                    vm.list[0] = 10;
                },1000);
            }
        })
    </script>
</body>

想實現(xiàn)一個效果：數(shù)組的某一項變化時，這個li的樣式會有一個顏色由紅到白的漸變，很短暫，0.5s就漸漸消失的一個紅色背景。
類似這個https://poloniex.com/exchange... 右側導航的列表

查閱了vue2的過度實現(xiàn)方案，沒有對應的案例，我沒搞出來
vue 過度效果：https://cn.vuejs.org/v2/guide...

回答
編輯回答
乖乖噠

watch這個數(shù)組,變化的時候判斷是哪一項變了，記錄索引然后綁定個樣式，用css3自己寫個動畫就好了

2017年6月18日 00:50
編輯回答
念舊

同watch數(shù)組，比對新舊數(shù)組哪幾個項發(fā)生了變化，記錄索引進行相關操作。
還有你這樣修改數(shù)組項無法觸發(fā)響應式更新。

    mounted:function () {
      var vm = this;
      var newList = vm.list.concat();
      
      setTimeout(function () {
          newList[0] = 233;
          vm.list = newList;
      },1000);
    },
    watch:{
      list(newArr, oldArr){
        var result = oldArr.reduce((iter, v, i) => {
          if(v !== newArr[i]) iter.push(i);
          return iter;
        }, [])
        console.log(result)
      }
    }
2017年10月21日 21:03
編輯回答
影魅

我覺得你可以結合css動畫來實現(xiàn)吧，通過:class綁定一個對應的動畫類樣式名，條件的話你得自己把控了。看這個思路適合你不

2018年3月18日 04:01