基礎からメモ： Vue.js CH2-p58 v-bindの修飾子

Vue.js

v-bindディレクティブで使える修飾子

var app = new Vue({
  el: '#app',
  data: {
    // オブジェクトデータ
    message: {
      value: "Hello Vue.js!"
    },
    scroll: 0,
  },
  mounted: function() {
      this.scroll = 100;
  },
  methods: {
    handleClick: function(event){
      this.scroll += 10;
    }
  }
})
.prop修飾子

属性ではなくDOMプロパティとして値をバインドする。

<p v-bind:text-content.prop="message.value"></p>

表示結果： <p>Hello Vue.js!</p>

<div v-bind:scroll-top.prop="scroll" style="width:200px; height:100px; overflow:auto; border:1px solid #aaaaaa;">
こんにちは。
この文章を最後まで読むには縦スクロールする必要があります。
あああ
いいい
ううう
えええ
おおお
</div>

Vueインスタンスでは、app.scrollの値は0だが、ライフサイクルフックのmountedでインスタンスのマウント後に値が100になるよう関数定義されているので、読み込み後に100スクロールする。

.camel修飾子

ケバブケースの属性名をキャメルケースに変換する。

.sync修飾子

双方向バインディングを行う。

  • v-bindには修飾子が使える。