Vue-js로 list 사용해보기

Front-End/Vue-js 2020. 3. 27. 14:49



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang = "ko">
<head...>
<title>Insert title here</title>
 
<body>
<div id="app">
    <!-- 반복문을 사용할때는 v-for이라는 태그를 써서 사용한다. -->
    <ul style = "list-style: none;">
<!-- Vue인스턴스에 있는 data인 items배열을 받아서 item에 넣고 반복하면서 출력한다. -->
 
<!-- 이미지를 삽입할때는 <img src="{{item.image}}"> 이런식으로 작성하면 값이 들어가지 않기 때문에 
<img :src="item.image">이런식으로 attribute앞에 콜론(:)을 작성해야 인식이된다. -->
        <template v-for="item in items">
        <li>
            <img :src="item.image">    
        </li>
        <li>
            {{item.title}}
        </li>
        </template>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<script>
 
/* 뷰 인스턴스를 변수에 담으면 변수 안에 접근할 수 있습니다, 바람직한 방법은 아님 */
아래처럼 app변수에 접근해서 값을 담아줄수 있습니다.
ex) app.items.push({id: 4, image : 'https://picsum.photos/210/118/?image=350', title: '추가아이템'});

 
    let app = new Vue({
        el: '#app',
        data() {
            return {
                items:[
                    {
                        id: 1,
                        image: 'https://picsum.photos/210/118/?image=1',
                        title: 'computer'
                    },
                    {
                        id: 2,
                        image : 'https://picsum.photos/210/118/?image=100',
                        title: 'beach'
                    },
                    {
                        id: 3,
                        image : 'https://picsum.photos/210/118/?image=160',
                        title: 'handphone'
                    },
                    {
                        id: 4,
                        image : 'https://picsum.photos/210/118/?image=200',
                        title: 'cow'
                    }
                ]    
            
            }
            
        }
        
    })
 
    
</script>
 
</body>
</html>
cs



실행화면


코드상에는 4번까지만 있지만 push로 2줄을 더 추가해주었다.


우측 개발자화면에서 Vue 인스턴스에 접근해서 push로 값을 넣어주면 좌측 화면에 표시된다.







출처


https://www.youtube.com/watch?v=zLoEUKEA7Hw&list=PLwawSyI26pfuGsEzp7AzP_TJVhSdwFuwh&index=3

저작자표시

'Front-End > Vue-js' 카테고리의 다른 글

Vue-js 기본적인 사용법-1  (0) 2020.04.27
Vue-js 기본  (0) 2020.03.27
:

티스토리툴바