Vue.js イベント バインディング - フォーム イベント バインディング

今回は、Vue.jsのイベントバインディング - フォームイベントバインディングについてご紹介します。 Vue.jsのイベントバインディング - フォームイベントバインディングを使用する際の注意点は何ですか? 実際のケースを見てみましょう。

input

<template>
  <div id="myapp">
    <!--
    input的事件绑定与普通的事件绑定的区别:
    input是双向绑定
    事件绑定采用v-model
    -->
    <input type="text" v-model="myVal">
    <!--将表单的内容显示出来-->
    {{myVal}}  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {        myVal: &#39;&#39;
      }
    }
  }</script>

修飾子: .lazyキーボードのEnterを押すと、データが

更新されます

<input type="text" v-model.lazy="myVal">
......

その他の修飾子

.number -

入力文字文字列は、次の場合に数値に変換されます.nu​​mber.trim を追加しないでください - 入力の先頭と末尾のスペースをフィルターします

intput - チェックボックス

checkbox multi-select

または v-model バインディングを使用します。設定は myVal を指し、myVal は

array, array 中に挿入される値はinputの値から取得されます

<template>
  <div id="myapp">
    {{myVal}}    <br><!--多选-->
    <input type="checkbox" name="" value="apple" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="banana" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="orange" v-model="myVal">
    <label >apple</label>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},
    data () {      return {        myVal: []
      }
    }
  }</script>

この記事の事例を読んでメソッドをマスターしたと思います。さらに興味深い情報については、php に注目してください。その他の関連記事は中国語の Web サイトにあります。

推奨読書:

Vue.jsのリストデータの同期更新メソッド

Vue.jsリストレンダリングv-for配列オブジェクトサブコンポーネント

以上がVue.js イベント バインディング - フォーム イベント バインディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。