Webフロントエンドvue:フォーム入力双方向バインド

vueの双方向データバインドは非常に簡単です.例えば、フォームに入力した値をリアルタイムで表示したり、バックグラウンドとインタラクティブにしたりするには、以前は多くのjsコードを書く必要がありましたが、v-modelの命令さえあれば実現でき、コントロールタイプに応じて自動的に正しい方法を選択して新しい要素を追加します.不思議ですが、v-modelは本質的に文法糖にすぎません.ユーザーの入力イベントをリスニングしてデータを更新し、極端なシーンを特別に処理します.注:v-modelは、すべてのフォーム要素のvalue、checked、selectedプロパティの初期値を無視し、常にVueインスタンスのデータをデータソースとして使用します.JavaScriptでコンポーネントのdataオプションに初期値を宣言する必要があります.

    ：
 //        
Message is: {{ message }}
  //     ，    
    
{{ message2 }}


   
<input type="checkbox" v-model="checked"/>
<label for="checkbox">{{ checked }}</label>
   
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"/>
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames"/>
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"/>
  <label for="mike">Mike</label>
  <br/>
  <span>Checked names: {{ checkedNames }}</span>
  
<input type="radio" id="one" value="One" v-model="picked"/>
  <label for="one">One</label>
  <br/>
  <input type="radio" id="two" value="Two" v-model="picked"/>
  <label for="two">Two</label>
  <br/>
  <span>Picked: {{ picked }}</span>
<script>
export default {
        data () {
            return {  //   
                message: '', //    
                message2: '', //    
                checked: false, //       
                checkedNames: [], //   ，      value，      
                picked:''  //    ，      
            }
        }
    }
</script>
</code></pre> 
 <p>data   ，                  ，            ，          ？            ，               。<br/>                     （nihaomeili87）      ！</p> 
</article>
                            </div>
                        </div>