Vue入力モデルの概念と使い方を詳しく解説-Vue.js-php.cn

Vue 入力モデルとは

Vue 入力モデルを検証に使用する方法

結論

ホームページ

ウェブフロントエンド

Vue.js

Vue入力モデルの概念と使い方を詳しく解説

PHPz

Apr 11, 2023 am 10:31 AM

Vue.js は、フロントエンド開発を簡素化する多くの便利な機能を提供する人気のある JavaScript フレームワークです。その中でも、Vue の入力モデルは、入力フィールドの状態を追跡し、検証を容易にする非常に便利な方法です。

この記事では、Vue 入力モデルの概念と使用法、および Vue アプリケーションでの使用方法を紹介します。

Vue 入力モデルとは

Vue 入力モデルは、データを HTML 要素にバインドできるようにする Vue.js フレームワークのディレクティブです。たとえば、これにより、Vue のデータプロパティを入力要素にバインドし、入力要素の値が変更されたときに Vue プロパティが自動的に更新されるようにすることができます。

Vue 入力モデルを使用する場合、input 要素の value 属性を Vue データ属性名に設定できます。こうすることで、input 要素の値が変更されると、Vue は data 属性の値を自動的に更新します。同時に、必要に応じてカスタム検証ルールを追加することもできます。

以下は簡単な例です:

<div id="app">
  <input v-model="message" />
  <p>Message: {{message}}</p>
</div>

ログイン後にコピー

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

ログイン後にコピー

上の例では、Vue のデータオブジェクトの message 属性を input 要素の value 属性にバインドします。ユーザーが入力ボックスにテキストを入力すると、Vue は message 属性の値をリアルタイムで更新し、それを下の p 要素に表示します。

Vue 入力モデルを検証に使用する方法

Vue 入力モデルは、双方向のデータバインディングツールであるだけでなく、入力検証にも役立ちます。上の例では、この入力ボックスには検証ルールが設定されておらず、ユーザーは何でも入力できることがわかります。

Vue アプリケーションでの入力検証に Vue 入力モデルを使用するには、次の方法を使用できます:

カスタム検証ルールの追加

You カスタム検証ルールを追加して、ユーザー入力の正確性を確認できます。 Vue の watch プロパティを使用して、データオブジェクトへの変更をリッスンし、データが変更されたときにデータを検証できます。

たとえば、次のコードは、ユーザーが入力した電子メールアドレスが仕様に準拠しているかどうかを確認する方法を示しています。

<div id="app">
  <form v-on:submit.prevent>
    <label>E-mail:</label>
    <input v-model="email">
    <div v-if="emailError">{{emailError}}</div>
    <button type="submit">Submit</button>
  </form>
</div>

ログイン後にコピー

var app = new Vue({
  el: '#app',
  data: {
    email: '',
    emailError: ''
  },
  watch: {
    email: function (val) {
      var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!regex.test(val)) {
        this.emailError = 'Please enter a valid email address.'
      } else {
        this.emailError = ''
      }
    }
  }
})

ログイン後にコピー

上記の例では、電子メールを監視する監視関数を追加しました。属性の多様性。電子メールアドレスが仕様を満たしていない場合、emailError プロパティが設定され、エラーメッセージが表示されます。電子メールアドレスが仕様と一致する場合は、この属性をクリアします。

Vue の計算プロパティを使用する

Vue の計算プロパティは、既存のデータプロパティに基づいて新しいプロパティを計算できます。計算された属性を使用して、ユーザー入力を検証できます。

たとえば、次のコードは、ユーザーが入力したユーザー名が仕様に準拠していることを確認する方法を示しています。

<div id="app">
  <form v-on:submit.prevent>
    <label>Username:</label>
    <input v-model="username">
    <div v-if="usernameError">{{usernameError}}</div>
    <button type="submit">Submit</button>
  </form>
</div>

ログイン後にコピー

var app = new Vue({
  el: '#app',
  data: {
    username: '',
  },
  computed: {
    usernameError: function () {
      var regex = /[a-zA-Z0-9]+/
      if (!regex.test(this.username)) {
        return 'Username can only contain letters and numbers.'
      } else {
        return ''
      }
    }
  }
})

ログイン後にコピー

上の例では、計算に使用される計算属性を追加しました。 usernameError 属性。ユーザー名に英数字以外の文字が含まれている場合、このプロパティが設定され、エラーメッセージが表示されます。それ以外の場合はクリアしてください。