【Vue.js】バインディング式とは

バインディング式

マスタッシュタグ内部のテキストのこと。
いくつかの種類がある。

JavaScript式

単一式であればマスタッシュタグ内にJSのように書くことができる。
JS

var vm = new Vue({
	el: '#vm',
  data: {
  	message: 'Hello Vue.js!',
    num: 100,
    ok: true
  }
})

<div id="vm">
  <p>{{ message }}</p>  => Hello Vue.js!
  <p>{{ num + 1 }}</p>  => 101
  <p>{{ message.split('').reverse().join('') }}</p> => !sj.euV olleH
  <p>{{ ok ? 'YES' : 'NO' }}</p> => YES
</div>

フィルタ

ローカルフィルタ

JSの中にfiltersオプションを用意し、その中にフィルタを書いていく。
例えば数字を３桁ずつカンマで区切りたい時はこんな感じ。

var vm = new Vue({
	el: '#vm',
  data: {
  	price: 19800
  },
  filters: {
  	numFormat: function(value) {
    	return value.toLocaleString()
    }
  }
})

.toLocaleString()は基本US表記なのでオプションは不要。
作成したフィルタはマスタッシュ構文中にパイプで繋いで記述する。

<div id="vm">
  <p>{{ price | numFormat }}</p> => 19,800
  <input type="text" v-bind:value="price | numFormat">
</div>

グローバルフィルタ

グローバルフィルタはvar vmの前に記述する。
書き方はVue.filter(フィルタ名, フィルタ動作)

Vue.filter('numFormat', function(value) {
	return value.toLocaleString()
})
var vm = new Vue({
	el: '#vm',
  data: {
  	price: 19800
  }
})

HTMLの書き方はローカルフィルタと同じ。

複数のフィルタの使用

複数のフィルタを使いたい場合、連結させることができる。

• 日本円からUSドルに変換するフィルタ
• 3桁ずつ区切るフィルタ

を連結させる場合を考える。

Vue.filter('toUSD', function(jpy, rate) {
	return jpy / 110
})
Vue.filter('numFormat', function(value) {
	return value.toLocaleString()
})
var vm = new Vue({
	el: '#vm',
  data: {
  	jpyPrice: 198000
  }
})

連結は同様にパイプで記述する。

<div id="vm">
  <p>${{ jpyPrice | toUSD | numFormat }}</p> => $1,980
</div>

フィルタの引数

フィルタの引数はhtml側から管理することができる。
例えば長い文字列の一部を表示し、残りを'...'で表記したい場合を考える。
lengthが表示する文字数、suffixが'...'の部分を示す。

Vue.filter('readMore', function(text, length, suffix) {
	return text.substring(0, length) + suffix
})
var vm = new Vue({
	el: '#vm',
  data: {
  	text: 'Humpty Dumpty sat on a wall, Humpty Dumpty had a great fall. All the kings horses and all the kings men. Couldnt put Humpty together again.'
  }
})

substringで文字を切り出すことができる。
オプションはそれぞれ(開始位置, 文字数)を示している。
続いてHTML側を記述するが、フィルタにlengthとsuffixに代入する値を記述するのを忘れないようにする。

<div id="vm">
  <p>
    {{ text | readMore(20, '...') }} => Humpty Dumpty sat on...
  </p>
</div>