二重中括弧 {{ }} 内でできること ❏Vue.js❏

開発環境はJSFiddleで！
https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

① data内のプロパティを直接書き込んで表示させることができる

html

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

<div id="app">
  <p>{{ message }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    message: "hello world!"
  }
})

【出力結果】
hello world!

② javascript式を書くことができる

html

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

<div id="app">
  <p>{{ message }}</p>
  <p>{{ number + 5 }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    message: "hello world!"
    number: 3
  }
})

【出力結果】
hello world!
8

③ 三項演算子を書くことができる

html

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

<div id="app">
  <p>{{ message }}</p>
  <p>{{ number + 5 }}</p>
  <p>{{ ok ? "YES" : "NO" }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    message: "hello world!"
    number: 3
    ok: true
  }
})

【出力結果】
hello world!
8
YES

④ メソッドを書くことができる

html

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

<div id="app">
  <p>{{ message }}</p>
  <p>{{ number + 5 }}</p>
  <p>{{ ok ? "YES" : "NO" }}</p>
  <p>{{ sayHi() }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    message: "hello world!"
    number: 3
    ok: true
  },
  methods: {
    sayHi: function() {
      return "Hi";
    }
  }
})

【出力結果】
hello world!
8
YES
Hi

ではまた！