Vue의 디렉티브를 이용해 다음과 같은 작업을 하는 방법을 알아보았다.
- 배열 기반의 리스트 출력
- 템플릿 반복
- 객체의 프로퍼티를 순회
v-for
리스트의 순회를 위해 v-for 디렉티브를 사용한다. 이 디렉티브는 ‘item in array’ 형태의 구문을 필요로한다.
범위
v-for 디렉티브는 정수를 받는 것이 가능하다. 리스트나 객체 대신 정수가 전달되면 템플릿이 이를 반복한다. (파이썬의 for in range 같은 느낌)
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<title>v-for in range</title>
</head>
<body>
<div class="container" id="app">
<h1>The multiplication table of 7.</h1>
<ul class="list-group">
<li v-for="i in 11" class="list-group-item">
{{ i-1 }} * 7 = {{ (i-1) * 7}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app"
});
</script>
</html>
|
배열
배열 순회
‘item in array’ 형태의 구문을 확인할 수 있을 것이다. (“story in stories”)
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<title>v-for array traversal</title>
</head>
<body>
<div class="container" id="app">
<h1>Let's hear some story</h1>
<div>
<ul class="list-group">
<li class="list-group-item" v-for="story in stories">
Someone said "{{ story }}"
</li>
</ul>
</div>
{{ $data }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
stories: ["I grew toward graduation.", "I have to get a job", "I wish!"]
}
});
</script>
</html>
|
객체 배열 순회
일반 배열 순회할 때와 크게 다른점은 없다.
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<title>v-for array traversal</title>
</head>
<body>
<div class="container" id="app">
<h1>Let's hear some story</h1>
<div>
<ul class="list-group">
<li class="list-group-item" v-for="story in stories">
{{ story.writer }} said "{{ story.plot }}"
</li>
</ul>
</div>
<pre>{{ $data }}</pre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
stories: [
{ plot: "I grew toward graduation.", writer: "JGB" },
{ plot: "I have to get a job", writer: "KMS" },
{ plot: "I wish!", writer: "MSW" }
]
}
});
</script>
</html>
|
객체 프로퍼티 순회
객체의 프로퍼티를 순회할 때도 v-for을 사용할 수 있다. value는 물론이고 key와 index도 각각 두 번째와 세 번째 인자로 지정할 수 있다.
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<title>v-for array traversal</title>
</head>
<body>
<div class="container" id="app">
<h1>Let's hear some stories</h1>
<ul class="list-group">
<li class="list-group-item" v-for="(value, key, index) in story">
{{index}} : {{key}} : {{ value }}
</li>
</ul>
<pre>{{ $data }}</pre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
story: {
plot: "I wish!",
writer: "MSW",
upvotes: 77
}
}
});
</script>
</html>
|