[Vue] 데이터 바인딩(Data Binding)

1 데이터 바인딩

---

속성 앞에 v-bind: or :(콜론)을 붙여주면 데이터바인딩이 가능하다.

 

    <div id="app">
        <input type="text" v-bind:value="inputData">
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                inputData:'id를 입력하세요',
            },
            methods:{
            }
        })
    </script>

결과값 :

value 값에 inputdata 객체 데이터를 연결시킬 수 있다.

이때 value 속성 값 앞에 v-bind를 적어주면 연결이 가능하다.(or 콜론(:))

 

---

데이터바인딩을할 때 함수를 이용하면 더욱 편리하다.

    <div id="app">
        <input type="text" v-bind:value="inputData">
        <a :href="getYoutubeChannel('watch?v=rluQa9r7MGA&ab_channel=눈에띠네')" target="_blank">유튜브 플레이리스트로 이동</a>
        <a :href="getYoutubeChannel('watch?v=mvX2HTN4quQ&ab_channel=외국힙합갤러리')" target="_blank">유튜브 감성플레이리스트로 이동</a>   
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                inputData:'유튜브',
                link:'https://www.youtube.com/',
            },
            methods:{
                getYoutubeChannel(channel){
                    return this.link + channel;
                }
            }
        })
    </script>

link 객체에 유튜브 주소를 설정한 뒤

getYoutubeChannel이라는 함수에 유튜브 주소 뒤에 매개변수를 설정해준다.

 

그래서 app에서 a링크의 href="" 주소 안에 getYoutubeChannel(유튜브 채널 뒷부분 주소') 인자를 주게되면

해당 유튜브 채널의 링크가 완성된다.

 

결과값 :