Vue 실천 - V-for 명령

하나의 수조나 대상을 순환해서 표시할 때 v-for 명령을 사용할 수 있으며 그 값은 item in items와 유사하다.그 중에서 items는 수조나 대상이고 item은 자연히 그 중의 하나이며 in도 of를 사용할 수 있다.
그룹을 옮겨다닐 때 선택할 수 있는 index가 있습니다. 현재 항목의 인덱스는 v-for = (item, [index]) in items와 유사합니다.

			
			
{{index}}.{{book.bookName}}
		

범람하는 데이터items가 하나의 대상일 때 두 가지 선택할 수 있는 키와 index가 있는데 각각 현재 항목의 속성 이름과 하표를 나타낸다. 표현식은 v-for=(item, [key], [index])initems와 유사하다.

			
			
{{index}}. {{item.name}}, {{item.time}}
		

v-for 순환은templete (패키지 요소) 요소에 사용되는 것을 지원하여 여러 요소를 렌더링합니다.
배열 업데이트
vue의 핵심은 데이터와 보기의 양방향 귀속이다. 이치에 따라 데이터가 변화할 때 보기도 변화한다.
v
ue는 수조의 변화를 감시하는 방법(원생 js에서 수조를 조종하는 방법과 차이가 많지 않음):push(), splice(), pop() 등등을 포함한다.
그렇지만
어떤 것들은 수조 변화를 직접 촉발할 수 없습니다: Filter (),concat (),slice (). 이 방법들은 원수조에서 바뀌는 것이 아니라 새로운 수조가 생겼기 때문에 보기가 바뀌려면 새로운 수조가 원시 수조에 값을 부여할 수 있습니다.
그리고 수조에 대한 작업에서 Vue는 검출할 수 없습니다: 1.그룹의 어떤 항목에 대해 그 값을 직접 바꿉니다. 2.그룹의 길이를 직접 바꾸기;그럼, 무슨 해결 방법이 있을까요?질문 1.예를 들어 책 배열의 세 번째 항목을 바꾸려면 Vue 내장set 방법: Vue.set(myApp.books, 3, {새 데이터}), 여기서 Vue.set을 myApp.$로 변경할 수도 있습니다.set.질문 2.splice 방법을 직접 사용할 수 있습니다. 예를 들어 책의 그룹 길이를 1로 설정하려면 myApp.books.splice(1),
배열의 필터링과 정렬은 계산 속성을 통해 이루어질 수 있다(원시 배열을 초기 데이터로 하고 계산 속성을 통해 정렬이나 필터된 배열을 되돌려주고 계산 속성을 옮겨다니며) 완전한 HTML:

	
	


	
	

		

			
			
{{index}}. {{item.name}}, {{item.time}}
		
		

			
			
{{key}}.{{book.bookName}}
		
		

			
			{{item}}
		
		 
	
	
	
		/* javascript  */
		var myApp = new Vue({
			el:"#container",
			data:{
				tasks:{
					taskname:{
						name:" ",
						time:new Date(2017,10,11)
					},
					taskname1:{
						name:" ",
						time:new Date(2017,10,14)
					},
					taskname2:{
						name:" ",
						time:new Date(2017,10,17)
					},
					taskname3:{
						name:" ",
						time:new Date(2017,10,20)
					}
				},
				books:[
					{bookName:"javascript "},
					{bookName:" javascript（ ）"},
					{bookName:" javascript（ ）"},
					{bookName:" javascript（ ）"},
				],
				istrue:true,
				num:100
			},
			methods:{
				ArrayPush:function(){
					var objOption = {
						bookName:"Vuejs "
					}
					this.books.push(objOption)
				}
			}
		})
		myApp.books.splice(1)