Vueの知識ポイントの要約（5）-vモデル（超詳細）

今日のコンテンツはvモデルです

双方向データバインディングはVueの魂の特徴の1つであり、v-modelはVue双方向バインディングの特徴を完全に体現しています。

あなたは使用することができ、V-modelコマンドを作成するには、双方向のデータバインディングにフォーム入力、テキストエリア、および選択の要素を。コントロールタイプに基づいて要素を更新するための正しい方法を自動的に選択します。やや不思議ですが、vモデルは本質的に単なる構文糖衣です。ユーザーの入力イベントを監視してデータを更新し、極端なシナリオで特別な処理を実行する役割を果たします。

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

テキスト

   <div id="app">
   <p>{
   
   {message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message" /></p>
    </div>
     <script>
        var app = new Vue({
     
     
            el:'#app',
            data:{
     
     
                message:'Hello'
            }
        });
    </script>

ここに画像の説明を挿入
入力ボックスに入力した内容は、上記のpタグにすばやくレンダリングされます。これにより、最も基本的なデータの双方向のバインドが完了します。これは、非常にシンプルで非常に実用的です。

複数行のテキスト

   <div id="app">
       <h3>文本域</h3>
       <textarea cols="30" rows="10" v-model="message"></textarea>
    </div>
     <script>
        var app = new Vue({
     
     
            el:'#app',
            data:{
     
     
                message:'Hello'
            }
        });
    </script>

ここに画像の説明を挿入
効果は1行のテキストと同じで、入力コンテンツはすぐにメッセージにバインドされ、ページにレンダリングされます

チェックボックス

   <div id="app">
       <h3>多选框绑定数组</h3>
        <p>
            <input type="checkbox" id="Ray" value="Ray" v-model="names">
            <label>Ray</label>
            <input type="checkbox" id="Creator" value="Creator" v-model="names">
            <label>Creator</label>
            <input type="checkbox" id="Code" value="Code" v-model="names">
            <label>Code</label>
        </p>
        <p>{
   
   {names}}</p>
    </div>
     <script>
        var app = new Vue({
     
     
            el:'#app',
            data:{
     
     
                names:[],
            }
        });
    </script>

ここに画像の説明を挿入
オプションを選択すると、選択したコンテンツはすぐに名前にバインドされ、非常に高速でページにレンダリングされます。

シングルボックス

   <div id="app">
        <h3>单选框绑定</h3>
        <p>
            <input type="radio" id="m" value="男" v-model="sex">
            <label>男</label>
            <input type="radio" id="w" value="女" v-model="sex">
            <label>女</label>
        </p>
        <p>{
   
   {sex}}</p>
    </div>
     <script>
        var app = new Vue({
     
     
            el:'#app',
            data:{
     
     
               sex:''
            }
        });
    </script>

ここに画像の説明を挿入

効果は基本的にチェックボックスに似ています。オプションを選択すると、選択したコンテンツが性別にバインドされ、ページに表示されます。

さらに、v-modelにはいくつかの修飾子があります

.lazy
デフォルトでは、v-modelは、各入力イベントがトリガーされた後、入力ボックスの値をデータと同期します（上記の入力メソッドがテキストを結合する場合を除く）。遅延修飾子を追加して、変更イベントの後に同期に切り替えることができます。
.number
ユーザーの入力値を数値型に自動的に変換する場合は、数値修飾子をv-modelに追加できます。
.trim
ユーザーが入力した最初と最後の空白文字を自動的にフィルタリングする場合は、v-modelにトリム修飾子を追加できます。

   <div id="app">
        <p>{
   
   {message}}</p>
        v-model的修饰符:
        <p>v-model.lazy(懒加载):<input type="text" v-model.lazy="message" /></p>
        <p>v-model.number(只绑定数字):<input type="text" v-model.number="message" /></p>
        <p>v-model.trim(去空格至1个):<input type="text" v-model.trim="message" /></p>
    </div>
     <script>
        var app = new Vue({
     
     
            el:'#app',
            data:{
     
     
               message:'Hello'
            }
        });
    </script>

ここに画像の説明を挿入
実際に操作してモディファイアの機能を確認できるのでとても便利です。

v-modelは、フォーム入力バインディングを処理するときに非常に便利で、シンプルで、柔軟性があります。試してみてください。ログインと登録用の小さなデモを作成してみてください。

WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246

次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。番号、注意してください、ありがとうございます！
ここに画像の説明を挿入