vue.js入門5

はじめに

今回はSection2-3(その1)をやっていきたいと思います。 内容としてはテンプレート構文になります。

テンプレート構文について

今までの部分で実装していた中の以下の部分がテンプレート構文になります。

{{ これがテンプレート構文 }}

上記以外にも使えるものがあります。

いろいろな構文

HTMLのコードを出力する(v-html)

{{}}ではHTMLのタグをHTMLとして出力できません。 そのままタグのテキストとして表示される仕様のようです。

HTMLとして出力する方法としてv-htmlを使います。

例

実装

ここで実際にコードを書いてみます。

<!DOCTYPE html>
<html>
<head>
  <title>v-html Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>v-html test</h1>
  <div id="app">
      <p v-html="message"></p>
  </div>
  <script>
  var data = {message: '<h2 style="color:blue">v-html data</h2>'}
  new Vue({
    el: '#app',
    data: data
  })
  </script>
</body>
</html>
抜粋

以下の部分がv-htmlの部分です。

// 宣言しているところ
<p v-html="message"></p>

// テンプレートに設定しているJavaScriptの変数の値
var data = {message: '<h2 style="color:blue">v-html data</h2>'}

上記のJavaScriptの変数に入れている文字列がHTMLタグになっています。 このHTMLがそのまま表示されることが期待されます。 これを次項の画面表示で確認します。

画面表示

f:id:set21set21:20210817204214p:plain

上記のようにv-html dataが青文字で表示されているので、HTMLタグが設定されていそうです。

HTMLの表示

念の為、開発者ツールでHTMLタグになっているか確認します。 以下のようにh2タグでHTMLが出力されているので期待どおりになっていることがわかりました。 f:id:set21set21:20210817205026p:plain

実装その２

次にv-htmlを使った動的なHTMLを試します。

実装例
<!DOCTYPE html>
<html>
<head>
  <title>v-html Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>v-html test</h1>
  <div id="app">
      <ol v-html="dynamicdata"></ol>
  </div>
  <input type="text" onInput="insertTag(event);">
  <button onclick="clickEvent()">
      add
  </button>
  <script>
  var data = {dynamicdata: '<li>dynamic html element</li>'}
  new Vue({
    el: '#app',
    data: data
  })
  function insertTag(event) {
      data.tmp = event.target.value;
  }
  function clickEvent() {
      data.dynamicdata += '<li>' + data.tmp + '</li>'
  }
  </script>
</body>
</html>
HTMLの表示
最初に表示される画面

f:id:set21set21:20210817214028p:plain

入力してaddボタンを押したあと

testと入力してaddボタンを押した場合、以下のようになります。 f:id:set21set21:20210817214124p:plain

v-bind

属性に値を設定するという内容になります。

実装例

どういうことか、実際に実装してみて確かめてみます。

コード
<!DOCTYPE html>
<html>
<head>
  <title>v-html Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>v-html test</h1>
  <div id="app">
      <p v-bind:style="style">{{ message }}</p>
  </div>
  <input type="number" onChange="changeFont(event);" value="10">
  <script>
  var data = { 
      message:"bind-test",
      style: 'color:blue;font-size:5px;'
  }
  new Vue({
    el: '#app',
    data: data
  })
  function changeFont(event) {
      data.style = 'color:red;font-size:' + event.target.value + 'pt;'
  }
  </script>
</body>
</html>
画面の表示
最初の表示

f:id:set21set21:20210819211146p:plain

入力フィールドに20を入力した後の画面

ここでp-bindの箇所がchangeFontメソッドで指定された内容で変更されたことがわかります。 f:id:set21set21:20210819211227p:plain

実装のポイント
v-bindの宣言部分

以下の部分がv-bindの部分です。

v-bind:style="style"
初期値

JavaScriptの以下の部分で設定しています。

  var data = { 
      message:"bind-test",
      style: 'color:blue;font-size:5px;'
  }
  new Vue({
    el: '#app',
    data: data
  })
動的な値の変更

以下の部分で実現しています。 入力箇所（onChangeイベントでJavaScriptのメソッド呼び出しをしています）

<input type="number" onChange="changeFont(event);" value="10">

上記から呼び出されるJavaScriptのメソッドです

  function changeFont(event) {
      data.style = 'color:red;font-size:' + event.target.value + 'pt;'
  }

ここでstyle属性にcolorがredでfont-sizeはevent.targetのvalueを設定するという動作になります。 ※event.target.valueはイベントが発生した対象の値が入る

オブジェクト構文

以下の形についてです。

v-bind:class="{ class名: 変数 }"

これを使うことで外部からON/OFFの切り替えができるようになります。

実装例

<!DOCTYPE html>
<html>
<head>
  <title>v-html Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <style>
  .red {
      font-size:20px;
      color:red;
  }
  .green {
      font-size:20px;
      color:green;
  }
  </style>
  <h1>v-html object test</h1>
  <div id="app">
      <p v-bind:class="{ red:isRed, green:isGreen }">{{ message }}</p>
  </div>
  <button onclick="modColor();">
      mod
  </button>
  <script>
  var data = { 
      message:"objectTest!",
      isRed:false,
      isGreen:true
  }
  new Vue({
      el: '#app',
      data: data
  });
  function modColor() {
      data.isRed = !data.isRed
      data.isGreen = !data.isGreen
  }
  </script>
</body>
</html>

画面表示

初期表示

最初に以下のように表示されます。 f:id:set21set21:20210823201556p:plain

modボタン押下

文字の色が変わります。 f:id:set21set21:20210823201655p:plain

オブジェクトでまとめて操作する

実装例

<!DOCTYPE html>
<html>
<head>
  <title>v-html Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <style>
  .red {
      font-size:20px;
      color:red;
  }
  .green {
      font-size:20px;
      color:green;
  }
  </style>
  <h1>v-html object test</h1>
  <div id="app">
      <p v-bind:class="classes">{{ message }}</p>
  </div>
  <button onclick="modColor();">
      mod
  </button>
  <script>
  var classObj = {
      red: true,
      greed: false
  };
  var data = { 
      message: 'objectTest!',
      classes: classObj  
  }
  new Vue({
      el: '#app',
      data: data
  });
  function modColor() {
      classObj.red = !classObj.red;
      classObj.green = !classObj.green;
  }
  </script>
</body>
</html>

画面表示

初期表示

f:id:set21set21:20210823203638p:plain

ボタンクリック後

f:id:set21set21:20210823203657p:plain

まとめ

ちょっと長くなったので一旦ここまでで終わりにします。 ここではテンプレート構文の以下を使ってみました。

  • vhtmlを使った実装
  • vbindを使った実装
    • v-bind:style
    • v-bind:class

次回はv-ifを使っていくところから始めます。