1、在默認(rèn)的情況下，Vue.js默認(rèn)不支持往數(shù)組中加入重復(fù)的數(shù)據(jù)。可以使用track-by="$index"來(lái)實(shí)現(xiàn)。

2、不使用track-by="$index"的數(shù)組插入，數(shù)組不支持重復(fù)數(shù)據(jù)的插入

2.1? JavaScript代碼

window.onload = function() {

vm = new Vue({

el: '#app',

data: {

arrMsg: ['apple', 'orage', 'pear']

},

methods: {

add: function() {

this.arrMsg.push('tamota');

}

}

});

}

2.2? html代碼

{{value}}

增加數(shù)據(jù)

2.2? 結(jié)果

3、使用track-by="$index"的數(shù)組插入，數(shù)組支持重復(fù)數(shù)據(jù)的插入

3.1 Javascript代碼

window.onload = function() {

vm = new Vue({

el: '#app',

data: {

arrMsg: ['apple', 'orage', 'pear']

},

methods: {

add: function() {

this.arrMsg.push('tamota');

}

}

});

}

3.2 html代碼

{{value}}

增加數(shù)據(jù)

3.3 結(jié)果

4、完整代碼

window.onload = function() {

vm = new Vue({

el: '#app',

data: {

arrMsg: ['apple', 'orage', 'pear']

},

methods: {

add: function() {

this.arrMsg.push('tamota');

}

}

});

}

{{value}}

增加數(shù)據(jù)

ps：下面看下vue 數(shù)組重復(fù)，循環(huán)報(bào)錯(cuò)

Vue.js默認(rèn)不支持往數(shù)組中加入重復(fù)的數(shù)據(jù)。可以使用track-by="$index"來(lái)實(shí)現(xiàn)。

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vue 怎么样不重复往数组里插入数据_Vue.js在数组中插入重复数据的实现代码分享...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。