yuheijotaki.com

フォーム入力バインディングを理解する その4

f:id:jotaki:20190212100544p:plain

何年か前に jQuery で作った type tester という簡易的なフォント（関連のスタイリング）のテスターツールを Vue.js で作ってみる。 その4

GitHub Pages： https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ：https://github.com/yuheijotaki/type-tester

input type="radio" のバインド

ラジオボタンの value をスタイルオブジェクトにバインドするときは下記のようになる
https://jp.vuejs.org/v2/guide/forms.html#%E3%83%A9%E3%82%B8%E3%82%AA

App.vue（一部簡略化）

<template>
  <div id="app">
    <div>
      <radioFontWeight @change="changeFontWeight"></radioFontWeight>
    </div>
    <div>
      <div v-bind:style="styleObject">{{message}}</div>
    </div>
  </div>
</template>

<script>
import radioFontWeight from './components/radio-fontWeight'

export default {
  name: 'App',
  components: {
    radioFontWeight
  },
  data() {
    return {
      message: '私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。',
      styleObject: {
        color: '#111',
        fontSize: '16px',
        lineHeight: '1.7',
        letterSpacing: '0em',
        fontWeight: 'normal'
      }
    }
  },
  methods: {
    changeFontWeight: function (weight) {
      this.styleObject.fontWeight = weight;
    }
  }
}
</script>

radio-fontWeight.vue（一部簡略化）

<template>
  <div>
    fontWeight:
      <input
        type="radio"
        id="fontWeight01"
        value="normal"
        v-model="fontWeight"
        @input="updateValue"
      >
      <label for="fontWeight01">Normal</label>
      <input
        type="radio"
        id="fontWeight02"
        value="bold"
        v-model="fontWeight"
        @input="updateValue"
      >
      <label for="fontWeight02">Bold</label>
  </div>
</template>

<script>
export default {
  name: 'radioFontWeight',
  data() {
    return {
      fontWeight: 'normal'
    }
  },
  methods: {
    updateValue(e) {
      this.$emit('input', e.target.value)
      this.$emit('change', e.target.value)
    }
  }
}
</script>

スタイルオブジェクトのプロパティに -webkit- などのプレフィクスが付けられない

キャメルケースだとハイフンの入れ方どうするかって思ったがプレフィクスは自動で挿入さるるので問題なさそう -webkit-font-smoothing: の場合

styleObject: {
  fontSmoothing: 'subpixel-antialiased'
}

参考：初心者がVue.jsの公式ガイドを勉強するメモ　クラスとスタイル編 - Qiita

次やること

  • font-familly: が 欧文/和文、ゴシック/明朝 で少し複雑そうだがやってみる
  • color: や background-color: は <input type="color"> で実装する