JavaScript式

Vue.jsでは、データバインディング内部でJavaScript式を利用することができます。

使えるのは単一の式のみです。

以下のように、式でないものや、単一でないものは使えません。

{{ var x = 1 }}

{{ if(ok) return message  }}

 

 

index.html

<div id="app">
    <p>
        {{message}}
    </p>
    <p>
        {{number + 1}}
    </p>
    <p>
        {{message.split('').reverse().join('')}}
    </p>
    <p>
        {{ok ? 'yes':'no'}}
    </p>

    <p>
        {{ok ? message: ''}}
    </p>
</div>

 

index.js

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!!',
        number: 100,
        ok: false
    }
})

 

ブラウザ

gyazo.com