Vue.js之在陣列中插入重複資料
阿新 • • 發佈：2019-02-15
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程式碼
<div id="app">
<!--顯示資料-->
<ul>
<li v-for="value in arrMsg" >
{{value}}
</li>
</ul>
<button type="button" @click="add">增加資料</button>
</div>2.2 結果
3、使用track-by="$index"的陣列插入，陣列支援重複資料的插入
3.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>
3.2 html程式碼
<div id="app" class="container">
<!--顯示資料-->
<ul>
<li v-for="value in arrMsg" track-by="$index" >
{{value}}
</li>
</ul>
<button type="button" @click="add" >增加資料</button>
</div>3.3 結果
4、完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<style type="text/css">
.container{
margin-top: 20px;
}
</style>
<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>
</head>
<body>
<div id="app" class="container">
<!--顯示資料-->
<ul>
<li v-for="value in arrMsg" track-by="$index" >
{{value}}
</li>
</ul>
<button type="button" @click="add" >增加資料</button>
</div>
</body>
</html>