触发视图更新-vue

触发更新

Vue对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会触发视图对的更新。

1. push ：再数据的最后添加一个数据
2. pop ：删除最后一个数据
3. shift：删除数据的第一个元素
4. unshift(item)：再数组的开头位置添加一个元素
5. splice(inddex,howmany,item1,…itemX)：向数组中添加或删除或替换元素
6. sort：排序
7. reverse: 反转

 <div id="app">        
 	 <!-- <div v-for="book in books" v-bind:key="book">            
 	 	<label>{{book}}</label>            
 	 	<input type="text" v-bind:placeholder="book">        
	 	</div>       
	        <button @click="changeBooks">更换图书</button> -->        
	        <div v-for="book in books">            
	        	<label>{{book}}</label>        
	        </div>       
	        <button @click="updatelist">更新视图</button>   
</div>
<script>    
	new Vue({        
		el: "#app",        
		data: {            
			books: ['Python','Java','PHP','C++'],           
			 // person: {            
			 //     username: "happy"           
			  // }       
			   },               
                 methods: {            
                 	changeBooks:function(){                this.books.sort(function (a,b){
                 	          // 整数 true    负数 false                    
                 	          return 5- Math.random()*10                
                 	          })            
                 	          },            
                 	          updatelist: function(){                
                 	          // 直接赋值                
                 	          // this.books = ["春花秋月"]                
                 	         // this.person.username = ""               
                 	         // push方法                
                 	         // this.books.push("梧桐灯")                
				 // 删除最后一个数据               
				  //this.books.pop()                
				  //删除第一个元素                
				  // this.books.shift()                
				  // 向books第0个位置添加元素                
				  // this.books.splice(0,0,"深海")                
				  // 下标从0开始，删除2个元素                
				  // this.books.splice(0,2)                
				  //下标从0开始，替换2个元素               
				   // this.books.splice(0,2,'天空','大海')                
				   //sort 排序                
				   // this.books.sort(function (x,y){                
				   //     a = Math.rangdom()                
				   //     b=Math.random()                
				   //     return a-b                
				   // })                
				   // 反转                
				   this.books.reverse()                            
				   }        }
}）
</script>