kita127_vue_memo.md

Vue.js ノウハウメモ

ディレクティブ

真の場合要素を表示

    <p v-show="!canBuy">
        <!-- 表示する要素を記載 -->
    </p>

    <p v-if="!canBuy">
        <!-- 表示する要素を記載 -->
    </p>

v-show は display プロパティの値を変更する.
v-if は　DOM の構造自体を追加・削除する.

省略記法

• v-bind
  • :
  • <div :style="errorMessageStyle">
  • <div v-bind:style="errorMessageStyle">
• v-on
  • @
  • <input type="number" @input="item.quantity = $event.target.value" v-bind:value="item.quantity" min=0>
  • <input type="number" v-on:input="item.quantity = $event.target.value" v-bind:value="item.quantity" min=0>