<template id="my-app">
 ? ?<!-- 1.v-bind value的綁定 2.監(jiān)聽input事件, 更新message的值 -->
 ? ?<!-- <input type="text" :value="message" @input="inputChange"> -->
 ? ?<input type="text" v-model="message">
 ? ?<h2>{{message}}</h2>
</template>
 ?data() {
 ? ? ? ?return {
 ? ? ? ? ?message: "Hello World"
 ? ? ? ?}
 ? ? ?},
 ? ? ?methods: {
 ? ? ? ?inputChange(event) {
 ? ? ? ? ?this.message = event.target.value;
 ? ? ? ?}
 }

<template id="my-app">
 ? ?<!-- 1.綁定textarea -->
 ? ?<label for="intro">
 ? ? ?自我介紹
 ? ? ?<textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
 ? ?</label>
 ? ?<h2>intro: {{intro}}</h2>

 ? ?<!-- 2.checkbox -->
 ? ?<!-- 2.1.單選框 -->
 ? ?<label for="agree">
 ? ? ?<input id="agree" type="checkbox" v-model="isAgree"> 同意協(xié)議
 ? ?</label>
 ? ?<h2>isAgree: {{isAgree}}</h2>

 ? ?<!-- 2.2.多選框 -->
 ? ?<span>你的愛好: </span>
 ? ?<label for="basketball">
 ? ? ?<input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 籃球
 ? ?</label>
 ? ?<label for="football">
 ? ? ?<input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
 ? ?</label>
 ? ?<label for="tennis">
 ? ? ?<input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 網(wǎng)球
 ? ?</label>
 ? ?<h2>hobbies: {{hobbies}}</h2>

 ? ?<!-- 3.radio -->
 ? ?<span>你的愛好: </span>
 ? ?<label for="male">
 ? ? ?<input id="male" type="radio" v-model="gender" value="male">男
 ? ?</label>
 ? ?<label for="female">
 ? ? ?<input id="female" type="radio" v-model="gender" value="female">女
 ? ?</label>
 ? ?<h2>gender: {{gender}}</h2>

 ? ?<!-- 4.select -->
 ? ?<span>喜歡的水果: </span>
 ? ?<select v-model="fruit" multiple size="2">
 ? ? ?<option value="apple">蘋果</option>
 ? ? ?<option value="orange">橘子</option>
 ? ? ?<option value="banana">香蕉</option>
 ? ?</select>
 ? ?<h2>fruit: {{fruit}}</h2>
 </template>

<template id="my-app">
 ? ?<!-- 1.lazy修飾符 -->
 ? ?//有l(wèi)azy，在失去焦點后才進行同步
 ? ?<!-- <input type="text" v-model.lazy="message"> -->

 ? ?<!-- 2.number修飾符 -->
 ? ?<!-- <input type="text" v-model.number="message">
 ? ?<h2>{{message}}</h2>
 ? ?<button @click="showType">查看類型</button> -->

 ? ?<!-- 3.trim修飾符 -->
 ? ?//trim自動過濾輸入內(nèi)容最開始和最后的空格,中間的會保留一個空格,多的會被過濾掉
 ? ?<input type="text" v-model.trim="message">
 ? ?<button @click="showResult">查看結(jié)果</button>
</template>