v-model を使用して Vue のフォーム要素の省略形をバインドする方法-Vue.js-php.cn

v-model を使用して Vue のフォーム要素の省略形をバインドする方法

PHPz

リリース： 2023-06-11 14:10:40

オリジナル

1385 人が閲覧しました

v-model を使用して Vue でフォーム要素をバインドする方法の略語

Vue は、インタラクティブなアプリケーションを迅速に構築できるようにする人気の JavaScript フレームワークです。 Vue には多くの実用的なディレクティブが用意されており、最もよく使用されるディレクティブの 1 つは「v-model」です。

「v-model」ディレクティブを使用して、フォーム要素を Vue インスタンスのデータプロパティにバインドできます。「v-model」ディレクティブは、ユーザーがフォーム入力を変更したときにデータ属性を自動的に更新でき、データ属性が変更されると、フォーム入力も自動的に更新されます。

ただし、実際のアプリケーションでは、「v-model」ディレクティブが面倒で長く見える場合があります。そのため、Vue では、コードを記述する際の利便性を高めるために、「v-model」ディレクティブにいくつかの省略形が用意されています。

以下では、Vue で「v-model」ディレクティブの略称を使用する方法を紹介します。

1. テキストボックスの省略形
テキストボックスの「v-model」コマンドは、「v-model="msg"」と省略できます。このうち、msg は Vue インスタンスのデータ属性の名前です。

例:

<template>
  <div>
    <input v-model="msg" placeholder="请输入文本">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    }
  }
</script>

ログイン後にコピー

は

<template>
  <div>
    <input :value="msg" @input="msg=$event.target.value" placeholder="请输入文本">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    }
  }
</script>

ログイン後にコピー

と省略されます:

<template>
  <div>
    <input type="checkbox" v-model="checkedValue">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    }
  }
</script>

ログイン後にコピー

2 複数選択ボックスの省略形

複数選択ボックスの「v-model」コマンドボックスは、「:checked ="checkedValue"」および「@change="onCheckedChange"」を使用して省略できます。

例:

<template>
  <div>
    <input type="checkbox" :checked="checkedValue" @change="onCheckedChange">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    },
    methods: {
      onCheckedChange(event) {
        this.checkedValue = event.target.checked;
      }
    }
  }
</script>

ログイン後にコピー

の省略形:

<template>
  <div>
    <input type="radio" v-model="checkedValue" value="1">
    <input type="radio" v-model="checkedValue" value="2">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    }
  }
</script>

ログイン後にコピー

3 ラジオボタンの省略形

ラジオボタンの「v-model」コマンドが使用可能「:checked ="checkedValue"」および「@change="onCheckedChange"」を省略します。

例:

<template>
  <div>
    <input type="radio" :checked="checkedValue === '1'" @change="onCheckedChange('1')">
    <input type="radio" :checked="checkedValue === '2'" @change="onCheckedChange('2')">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    },
    methods: {
      onCheckedChange(value) {
        this.checkedValue = value;
      }
    }
  }
</script>

ログイン後にコピー

は次のように省略されます:

rrreee### 要約すると、Vue の「v-model」ディレクティブの省略形により、コードがより簡潔になり、簡単になります。ただし、略語の正しい使用に注意してください。実際の開発では、必要に応じて適切な省略方法を選択できます。 ###

以上がv-model を使用して Vue のフォーム要素の省略形をバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。