Vue.js ディレクティブ

ディレクティブはHTMLタグの中にある v-text のようなVue用の特別な属性です。

				
<div v-text="msg"></div>

サンプル

				
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 v-if="bool1">v-if</h1>
        <h1 v-else-if="bool2">v-else-if</h1>
        <h1 v-else>v-else</h1>
        <h1 v-show="bool3">v-show</h1>
        <button v-on:click="exec">btn</button>
        <a v-bind:href="www">aaa</a>
        <input type="checkbox" v-model="bool3">
        <div v-text="msg"></div>
        <div v-html="msg"></div>
        <div v-for="item in items" v-bind:key="item.id">
            {{ item.id + "-" + item.message  }}
        </div>

        <div v-for="n in 5">
            {{ n  }}
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                www: 'https://www.google.co.jp/',
                bool1: true,
                bool2: true,
                bool3: true,
                msg: "<b>bold</b>",
                items: [{
                        id: 1,
                        message: 'One'
                    },
                    {
                        id: 2,
                        message: 'two'
                    }
                ]
            },
            methods: {
                exec: function () {
                    this.bool1 = false;
                }
            }
        })
    </script>
</body>

</html>

条件分岐

				
        <h1 v-if="bool1">v-if</h1>
        <h1 v-else-if="bool2">v-else-if</h1>
        <h1 v-else>v-else</h1>

条件分岐には、v-if、v-else-if、v-elseを使います。v-if単体でも使えますし、v-if、v-elseだけでも使えます。

条件表示

				
        <h1 v-show="bool3">v-show</h1>

条件により表示/非表示を制御するなら、v-showを使います。

イベント

				
      <button v-on:click="exec">btn</button>
      <button @:click="exec">btn</button>

				
        var app = new Vue({
            el: '#app',
            methods: {
                exec: function () {
                    this.bool1 = false;
                }
            }
        })

v-onでイベントをキャッチし、JavaScirptの処理を呼び出せます。省略して@でも同じ動きをします。

画面表示とJavaScript処理の連携

				
        <input type="checkbox" v-model="bool3">

				
        var app = new Vue({
            el: '#app',
            data: {
                bool3: true
            }
        })

v-modelで画面入力値とJavaScript処理の変数を同期することができます。

HTML属性とJavaScript処理の連携

				
        <a v-bind:href="www">aaa</a>
        <a :href="www">aaa</a>

				
        var app = new Vue({
            el: '#app',
            data: {
                www: 'https://www.google.co.jp/'
            }
        })

v-bindで属性値とJavaScript処理の変数を同期することができます。v-bindは省略できます。

ループ

				
        <div v-for="item in items" v-bind:key="item.id">
            {{ item.id + "-" + item.message  }}
        </div>

        <div v-for="n in 5">
            {{ n  }}
        </div>

				
        var app = new Vue({
            el: '#app',
            data: {
                items: [{
                        id: 1,
                        message: 'One'
                    },
                    {
                        id: 2,
                        message: 'two'
                    }
                ]
            }
        })

ループはv-forを使います。

画面表示

				
        <div v-text="msg"></div>
        <div v-html="msg"></div>

				
        var app = new Vue({
            el: '#app',
            data: {
                msg: "<b>bold</b>"
            }
        })

画面表示はv-text、v-htmlを使用します。

テキストとして表示する場合は、v-text(<b>bold</b>)を使用し、HTMLとして表示する場合はv-html(bold)を使用します。

ページのトップへ戻る