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

鍍金池/ 問(wèn)答/HTML/ vue on事件里的 $event會(huì)觸發(fā)兩次

vue on事件里的 $event會(huì)觸發(fā)兩次

想做一個(gè)效果,點(diǎn)擊一個(gè)對(duì)象他的css0.4秒的過(guò)渡,然后0.4秒以后刪除這個(gè)元素,但是用@on里面?zhèn)髁?code>$event,使用了currentTarget,不光點(diǎn)擊的div變色,并且后面的也跟著改變了.
比如我點(diǎn)了div1=>div1變色0.4秒=>0.4秒后div1被刪除=>div2變色(但沒(méi)有被刪除).
不是click事件觸發(fā)兩次,好像是e.currentTarget.style.backgroundColor="red";觸發(fā)了兩次.
vue新手,希望大神指導(dǎo),謝謝

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="(x,index) in arr" @click="test(index,$event)">{{x}}</div>
    </div>
    <script src="../../vue.js"></script>
</body>
</html>

css

    div{
        transition: 0.4s;
    }

js

var app=new Vue({
    el:'#app',
    data:{
        arr:[1,2,3,4,5,6]
    },methods: {
        test:function(index,e){
            e.currentTarget.style.backgroundColor="red";
            var that=this;
            setTimeout(function(){
                that.arr.splice(index,1);
            },400);
        }
    }
});
回答
編輯回答
做不到

click事件應(yīng)該只觸發(fā)一次！

當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。這個(gè)類似 Vue 1.x 的 track-by="$index" 。
為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。理想的 key 值是每項(xiàng)都有的且唯一的 id。這個(gè)特殊的屬性相當(dāng)于 Vue 1.x 的 track-by ，但它的工作方式類似于一個(gè)屬性，所以你需要用 v-bind 來(lái)綁定動(dòng)態(tài)值：
:key="x"

參考內(nèi)容：
clipboard.png
參考鏈接：https://cn.vuejs.org/v2/guide...

2018年1月12日 22:36
編輯回答
冷咖啡

應(yīng)該只觸發(fā)了一次。
你可以給v-for綁定上:key="x"
組件復(fù)用引起的。
多說(shuō)一句，涉及到增刪的不要用index做key。

2017年1月29日 09:21