【Vue.jsの便利な使い方】HTML上で数式や条件分岐などの処理を直接行い表示する方法

Vue.js

2023/12/29

記事内に広告が含まれていることがあります。

Vue.jsを使うと、Vue.jsの中に数式や処理を記載したメソッドを作成しなくても、HTML上で直接処理を実行することができます。

HTML上で処理を実行する方法
四則演算
メソッドによる処理
真偽値の値で表示内容を分岐
エラー事例

HTML上で処理を実行する方法

マスタッシュ構文{{ }}は通常、dataオブジェクトの値を表示する目的で使われますが、この中で計算や条件分岐などの処理も実行することができます。

記述できる式はJavaScriptの形となるため、JavaScript式と呼びます。

以下で、四則演算、メソッドを使った処理、条件分岐の実例を紹介しています。

四則演算

var app = new Vue({
    el:"#app",
    data: {
        number1: 10,
        number2: 3
    }
})

<body>
    <div id="app">
        <p>{{number1+10*10}}</p>
        <p>{{number1-number2}}</p> 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/main.js"></script>
</body>

▼ブラウザの表示

メソッドによる処理

Vue.jsではJavaScriptのメソッドを使用することができます。例えば、split()の場合「要素.split」という形で記述します。

文字列を① 1文字づつ分割し、② 反転させ、③ 再結合するjavascript式

.split('').reverse().join('')}

var app = new Vue({
    el:"#app",
    data: {
        string:'こんにちは'
    }
})

<body>
    <div id="app">
        <p>{{string.split('').reverse().join('')}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/main.js"></script>
</body>

▼ブラウザの表示

真偽値の値で表示内容を分岐

プロパティの真偽値に合わせ表示内容を変更することもできます。

プロパティ名:真偽値

{{プロパティ名 ? 'trueの場合の表示内容' : 'falseの場合の表示内容'}}

var app = new Vue({
    el:"#app",
    data: {
        ok: true
    }
})

<body>
    <div id="app">
        <p>{{ok ? 'trueです' : 'falseです'}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/main.js"></script>
</body>

▼ブラウザの表示

エラー事例

文や関数など、JavaScript式以外はエラーになります。

▼エラーとなる例

文
{{ var x = 1 }}
フロー制御
{{ if(ok){return string} }}