[Vue.js] 각종 태그 데이터 바인딩 하기

데이터 바인딩 : 데이터를 연결해주는 것

각 속성 앞에 v-bind: 를 붙이면 된다.

1. input value 바인딩

<div id="app">
	<input type="text" v-bind:value="inputData">
    // v-bind: 를 사용하는게 맞지만 길기때문에 생략하여 : 만 작성해도 된다.
    // 위 아래 같은 의미
    <input type="text" :value="inputData">
</div>

<script>
	new Vue({
    	el: "app",
        data: {
        	inputData: "hello"
        }
    })	
</script>

data 안에 inputData라는 이름으로 값을 넣어주고, input 태그에는 기존 value인 값을 -> v-bind:value로 설정하면 바인딩 됩니다.

 

2. input type 바인딩

<div id="app">
	<input v-bind:type="iType" value="안녕하세요.">
    // v-bind: 를 사용하는게 맞지만 길기때문에 생략하여 : 만 작성해도 된다.
    // 위 아래 같은 의미
    <input :type="iType" value="안녕하세요.">
</div>

<script>
	new Vue({
    	el: 'app',
        data: {
        	iType: 'text'
        }
    })	
</script>

 

3. a href 바인딩

<div id="app">
	<a :href="link"> 테스트 </a>
</div>

<script>
	new Vue({
    	el: 'app',
        data: {
        	link: 'https://ddol.tistory.com/'
        }
    })	
</script>

a태그를 선택할 경우 제 티스토리 메인으로 이동합니다.

다른 값을 넣고 싶을 경우에는

<div id="app">
	<a :href="getURILink('54')"> 테스트 </a>
</div>

<script>
	new Vue({
    	el: 'app',
        data: {
        	link: 'https://ddol.tistory.com/'
        },
        methods: {
        	getURILink(channel) {
            	return this.link + channel;
            }
        }
    })	
</script>

함수를 호출하여 기존 link에 추가하여 url을 호출해줍니다.