Vue.jsで足し算をしよう

プログラミング界隈で盛り上がっているVue.jsを勉強していくコーナー 今回は、Vue.jsで足し算を思います。

今回したい事

  • Vue.jsで足し算をする。

完成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>SampleTitle</title>
</head>

<body>
  <div id="app">
    <p>{{ number + 1 }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>

</html>
<script>
new Vue({
  el: '#app',
  data: {
    number:1
  }
})
</script>

動くサンプル

動くサンプルはこちら

コード解説

HTML部分

<body>
  <div id="app">
    <p>{{ number + 1 }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
{{number + 1}}

でnumberに1を足します。

スクリプト部分

<script>
new Vue({
  el: '#app',
  data: {
    number:1
  }
})
</script>

dataのnumberに1が挿入されています。
数字の場合は"1"ではなく1と直接書きます。