Vue.js v-bindでhtmlの属性に値を入れる

公式ドキュメントの項目：宣言的レンダリングで、v-bindを使っているところの解説をします。

まずは、コードを書いてみます。

サンプルコード html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>
  </body>
</html>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
</script>

実行結果(テキストにマウスを合わせるとポップアップが出ます)