vueフォームの詳しい説明

v-model ディレクティブを使用して、フォーム コントロール要素に双方向のデータ バインディングを作成できます。この記事では主に vue フォームの詳しい説明を紹介しますので、必要な方は参考にしてください

1. 基本的な使い方

で双方向フォームを作成するには v-model コマンドを使用します。および 要素 データ バインディング。

しかし、v-model は本質的に単なる糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行する役割を果たします。

v-model は、すべてのフォーム要素の value、checked、selected 属性の初期値を無視し、常に Vue インスタンスのデータをデータ ソースとして使用します。コンポーネントの data オプションで JavaScript を介して初期値を宣言する必要があります。

text、textarea、radio、checkbox、select の基本的な使用法を読んだ後のコードのセット:

<p id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--复选框使用数组类型的数据匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </p>

var app7 = new Vue({
 el: &#39;#app7&#39;,
 data:{
  message: &#39;单行文本&#39;,
  message1: &#39;多行文本&#39;,
  picked: true,
  sex: &#39;boy&#39;,
  hobby: [&#39;爬山&#39;,&#39;滑雪&#39;],
  select: &#39;css&#39;,
  selected: &#39;A&#39;,
  options: [
   { text: &#39;One&#39;, value: &#39;A&#39; },
   { text: &#39;Two&#39;, value: &#39;B&#39; },
   { text: &#39;Three&#39;, value: &#39;C&#39; }
  ]
 }
});

2. 値バインディング

ラジオ ボタン、チェック ボックス、および選択リストは、単独で使用することも、または単独で使用することもできます。選択したモードでは、v-model によってバインドされる値は静的文字列またはブール値ですが、ビジネスでは、動的データをバインドする必要がある場合があります。この場合、v-bind を使用できます。

フォームで一般的に使用されるラジオ、チェックボックス、および選択の値バインディングを読み取った後のコードのセット:

 <p id="app8">
  <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>

  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>

  <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </p>

var app8 = new Vue({
 el: &#39;#app8&#39;,
 data:{
  picked: false,
  value: &#39;boy&#39;,
  toggle: false,
  value1: &#39;a&#39;,
  value2: &#39;b&#39;,
  selected: &#39;&#39;
 }
});

3. 修飾子

イベント修飾子と同様に、v-model にも制御用の修飾子があります。データ同期のタイミング。

一般的に使用される修飾子、lazy、number、trim を読んだ後のコードのセット

<p id="app9">
  <!-- .lazy:
  在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
  使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->
  <input type="text" v-model.lazy="message">
  <p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input type="text" v-model="text">
  <p>{{text}}</p>
 </p>
var app9 = new Vue({
 el: &#39;#app9&#39;,
 data:{
  message: &#39;&#39;,
  number: &#39;&#39;,
  text: &#39;&#39;
 }
});

上記は、将来すべての人に役立つことを願っています。

関連記事:

Ajaxにおけるブラウザとサーバー間のやり取りを詳しく解説

AJAXをゼロから学ぶためのAJAXフレームワーク

AJAXをゼロから学び自動検証フォームを作る

以上がvueフォームの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。