Vue.js 디렉티브 directive (v-text, v-html, v-show, v-if)

디렉티브 : vue 엘리먼트의 데이터, 함수 또는 event를 html tag와 연결

 

• v-text

  • 콧수염괄호와 동일 {{ message }}

• html

<div id="app">
    <p v-text="message"></p>   <!-- {{}}와 동일함 -->
    <p>{{message}}</p>
</div>

• javascript

new Vue({
    el: '#app',
    data: {
        message: 'hello'
    }
});

 

• v-html

  • Vue의 데이터를 html로 삽입

• html

<div id="app"> 
    <p v-html="message"></p>
</div>

• javascript

new Vue({
    el: '#app',
    data: {
        message: '<p>hello<br>Vue</p>'
    }
});

 

 

• v-show

  • css display 속성의 "block"/"none"  또는 jquery의 show()/hide()

• html

<div id="app"> 
    <p v-show="show">show</p> <!-- true -->
    <p v-show="hide">hide</p> <!-- false -->
</div>

• javascript

new Vue({
    el: '#app',
    data: {
        show: true,
        hide: false
    }
});

• 결과

 

• v-if, v-else, v-else-if

  • v-if/v-else/v-else-if 중 true에 해당하는 tag영역이 렌더링 되며, false에 해당하는 tag영역은 렌더링 되지 않음

• html

<div id="app">
    <p v-if="show">show</p> <!-- true -->
    <p v-else-if="hide">hide</p> <!-- false -->
    <p v-else>hide</p> <!-- false -->
</div>

• javascript

new Vue({
    el: '#app',
    data: {
        show: true,
        hide: false
    }
});

• 결과