Vue.js之在数组中插入重复数据

女爷i 2022-07-08 15:26 285阅读 0赞

1、在默认的情况下，**Vue.js默认不支持往数组中加入重复的数据。可以使用track-by="$index"来实现。**

2、**不使用track-by="$index"**的数组插入，**数组不支持重复数据的插入**

2.1  JavaScript代码

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  结果

![20170305150640897][]

3、**使用****track-by="$index"**的数组插入，**数组支持重复数据的插入**

3.1 Javascript代码

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 结果

![20170305150827695][]

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>

[20170305150640897]: /images/20220708/6e8032ae8a634d7cbbc932583221e572.png
[20170305150827695]: /images/20220708/7820f41bf04946d0a7dc1a3e9f922f40.png