基礎からメモ： Vue.js CH2-p65 SVGデータのバインディング

Vue.js

SVGデータをバインディングすることができる。インターフェイス側の属性値とVueインスタンス側のデータの値は連動して変化する。

フォームスライダーの数値と同期して、SVGでマークアップされた円の半径が変化する。

[index07.html]

<div id="app">
  <!-- SVGのデータバインディング  -->
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="75" v-bind:r="radius" fill="lightpink" />
      </svg>
      <div class="handle"><input type="range" min="0" max="100" v-model="radius"></div>
      <pre>{{ $data }}</pre>
  </div>

[main07.js]

var app = new Vue({
  el: '#app',
  data: {
    // SVGデータのプロパティ
      radius: 50
  },
})

{{ $data }}