v-for 

반복문 처리 

 

<html> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 

<body> 

 

<div class="container"> 

<h1>bootstrap test bootstrap test  bootstrap test </h1> 

<ul class="list-group"> 

<li v-for = "i in 11" class="list-group-item"> 

{{ i-1}} times 4 equals {{  (i-1) * 4 }} 

</li> 

</ul> 

</div> 

 

</body> 

 

 

 

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 

<script> 

new Vue({ 

  el: '.container' 

}) 

 

 

</script> 

</html> 

 

 

 

<html> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 

<body> 

 

<div class="container"> 

<h1>bootstrap test bootstrap test  bootstrap test </h1> 

<ul class="list-group"> 

<li v-for ="out in korean" class="list-group-item"> 

{{out}} 

</li> 

</ul> 

</div> 

 

</body> 

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 

<script> 

new Vue({ 

  el: '.container' , 

  data : {korean :  [ 

"가", 

"나", 

"다", 

"라", 

"마" 

]} 

}) 

 

 

</script> 

</html> 

 

 

 

 

<html> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 

<body> 

 

<div class="container"> 

<h1>bootstrap test bootstrap test  bootstrap test </h1> 

<ul class="list-group"> 

<li v-for ="out in korean" class="list-group-item"> 

{{out.word}}  // {{out.print}} 

</li> 

</ul> 

</div> 

 

</body> 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 

<script> 

new Vue({ 

el: '.container' , 

data : {korean :  [ 

{ word : "가",  print : "가나다"} , 

{ word :"나",  print :"가나다"} , 

{ word :"다", print :"가나다"} , 

{ word :"라", print :"가나다"} , 

{ word :"마" ,  print :"가나다"} , 

]} 

 

}) 

 

 

</script> 

</html> 

 

 

 

Index도 추가할수있따. 

 

<ul class="list-group"> 

<li v-for ="(out , index)  in korean" class="list-group-item"> 

{{index}}  // {{out.word}}  // {{out.print}} 

</li> 

</ul> 

 

 

 

 

 

 

Key value로도 접근 가능 

 

<html> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 

<body> 

 

<div class="container"> 

<h1>bootstrap test bootstrap test  bootstrap test </h1> 

<ul class="list-group"> 

<li v-for ="(value , key , index) in korean" class="list-group-item"> 

{{index}}  //  {{key}} // {{value}} 

</li> 

</ul> 

</div> 

 

</body> 

 

 

 

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 

<script> 

new Vue({ 

el: '.container' , 

data : {korean :   

{ word : "가",  print : "가나다"} 

 

} 

 

}) 

 

궁금증이 생겼다 

이방법으로 리스트로 하면어떻게 될까 였다. 

 

<html> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 

<body> 

 

<div class="container"> 

<h1>bootstrap test bootstrap test  bootstrap test </h1> 

<ul class="list-group"> 

<li v-for ="(value , index  , key) in korean" class="list-group-item"> 

  {{index}}  //  {{key}} // {{value}} 

 

</li> 

</ul> 

</div> 

 

</body> 

 

 

 

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 

<script> 

new Vue({ 

el: '.container' , 

data : {korean :[ 

{ word : "가",  print : "가나다"}, 

{ word : "나",  print : "나다마"} 

 

]}   

 

}) 

 

 

</script> 

</html> 

 

 

 

아마도 v-for에 인자값이 순서가 정해져있나보다 

 

 

 

</script> 

</html> 

 

공식 가이드를 보면 

 

 

 

item , index순서이다. 

 

 

 

하지만 요소가 3개일경우엔 

 

 

Item key index순서인거같다. 

 

 

 

자세한건 링크 

https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for 

 

참조해야겠다. 

 

 

 

 


저작자표시 (새창열림)

'오락기 > vue.js' 카테고리의 다른 글

상호 작용  (0) 2018.05.25
디렉티브  (0) 2018.05.25
vue vs jquery  (0) 2018.05.25
코어  (0) 2018.05.25

+ Recent posts

티스토리툴바