本文主要介紹了Vue.js在陣列中插入重複資料的實作程式碼,需要的朋友可以參考下，希望能幫助到大家。
1、在預設的情況下，Vue.js預設不支援在陣列中加入重複的資料。可以使用track-by="$index"來實現。
2、不使用track-by="$index"的陣列插入，陣列不支援重複資料的插入
2.1 JavaScript程式碼
<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
<script type="text/javascript">
window.onload = function() {
vm = new Vue({
el: '#app',
data: {
arrMsg: ['apple', 'orage', 'pear']
},
methods: {
add: function() {
this.arrMsg.push('tamota');
}
}
});
}
</script>2.2 html程式碼
<p id="app">
<!--显示数据-->
<ul>
<li v-for="value in arrMsg" >
{{value}}
</li>
</ul>
<button type="button" @click="add">增加数据</button>
</p>2.2 結果
1) 使用使用使用使用使用使用使用使用使用標準#1 "$index"的陣列插入，數組支援重複資料的插入
3.1 Javascript代碼
r
<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
<script type="text/javascript">
window.onload = function() {
vm = new Vue({
el: '#app',
data: {
arrMsg: ['apple', 'orage', 'pear']
},
methods: {
add: function() {
this.arrMsg.push('tamota');
}
}
});
}
</script> 3.3 結果
4、完整程式碼
##4、完整程式碼
#
<p id="app" class="container">
<!--显示数据-->
<ul>
<li v-for="value in arrMsg" track-by="$index" >
{{value}}
</li>
</ul>
<button type="button" @click="add" >增加数据</button>
</p>#Vue.js預設不支援在陣列中加入重複的資料。可以使用track-by="$index"
來實現。 ######最詳細的vue.js安裝教學############Vue.js開發一個全域呼叫的MessageBox元件############Vue.js常用指令的學習詳解#######以上是詳解Vue.js在陣列中插入重複資料的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
