vue が v-model を実装する方法を詳しく説明した記事 (コード例付き)

この記事では、vue に関する関連知識を提供します。主に、なぜ v-model を使用するのかについて説明します。 vue を使って v-model を実装する方法について興味がある方は見てみましょう。

• v-model を使用する理由 v-model は、双方向バインディング命令として、vue の 2 つのコア機能の 1 つでもあり、非常に使いやすく、フロントエンド開発の効率を向上させます。ビュー層では、モデル層は相互にデータをやり取りする必要があるため、v-model を使用できます。
• v-modelの原理を簡単に説明します

v-modelは主に2つの機能を提供しており、ビュー層の入力値がデータの属性値に影響を与えます。データ属性の値が変更されると、ビューが更新され、レイヤーの値が変更されます。

核心は、一方では、モーダル レイヤーがdefinePropertyを通じて各属性をハイジャックし、変更が検出されると、関連するページ要素を通じて更新されるということです。一方、テンプレート ファイルをコンパイルすると、入力イベントがコントロールの v-model にバインドされるため、ページ入力は関連するデータ属性値をリアルタイムで更新できます。

• v-modelとは v-model は Vue の双方向バインディング命令です。ページ上のコントロールによって入力された値を、関連するバインドされたデータ属性に同期的に更新できます。また、データ バインディング属性が変更されている場合、ページ上の入力コントロールの値も更新します。更新しました。

vue2.0実装メソッド

• 親コンポーネント

<template>
  <div id="app">
    {{username}} <br/>
    <my-input type="text" v-model="username"></my-input>
  </div>
</template>

<script>
import myinput from &#39;./components/myinput&#39;
export default {
  name: &#39;App&#39;,
  components:{
      myinput
  },
  data(){
    return {
      username:&#39;&#39;
    }
  }

}
</script>

• myinput.vue：

<template>
    <div class="my-input">
        <input type="text" class="my-input__inner" @input="handleInput"/>
    </div>
</template>

<script>
    export default {
        name: "myinput",
        props:{
            value:{ //获取父组件的数据value
                type:String,
                default:&#39;&#39;
            }
        },
        methods:{
            handleInput(e){
                this.$emit(&#39;input&#39;,e.target.value) //触发父组件的input事件
            }
        }
    }
</script>

最も一般的なのは、モーダル ボックスの表示と閉じるを制御することです。v-model を使用して、例として要素の el-dialog コンポーネントを取ることもできます

##App.vue

<template>
    <div>
        <kmDialog
            v-model="showDialog"
        >
        <el-button @click="show">点我</el-button>
    </div>
</template>
<script>
    import kmDialog from &#39;KmDialog.vue&#39;
    export default {
        components: {
            KmDialog
        }
        data () {
            return {
                showDialog: false
            }
        },
        methods: {
            show() {
                this.showDialog = true
            }
        }
    }
</script>

KmDialog.vue

<template>
    <el-dialog
        :title="isEdit ? &#39;编辑设备&#39; : &#39;新增设备&#39;"
        :visible.sync="value"
        width="40%"
        @close="cancel"
      >
        <span>这是一段信息</span>
    </el-dialog>
</template>
<script>
    export default {
        props: {
            value: {
                default: false,
                type: Boolean
            }
        },
        methods: {
            cancel() {
                this.$emit(&#39;input&#39;, false)
            }
        }
    }
</script>

推奨学習: 「

vue.js ビデオ チュートリアル 」

以上がvue が v-model を実装する方法を詳しく説明した記事 (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。