<div id="app" >

            <!-- v-model数据绑定 -->

            <input type="text" v-model="message" placeholder="输入。。。"/>

            <p>输入的内容是：{{message}}</p>

            <textarea v-model="message" placeholder="输入。。"></textarea>

            <!-- 单选框，使用v-model和value实现互斥，相等时选中 -->

            <input type="radio" v-model="picked" value="html" id="html"/>

            <label for=html >HTML</label>

            <input type="radio" v-model="picked" value="js" id="js"/>

            <label for=js >js</label>

            <input type="radio" v-model="picked" value="css" id="css"/>

            <label for=css >css</label>

            <!-- 多选框，checked，值是false和true根据选中与否，实现切换 -->

            <input type="checkbox" v-model="checked" id="checked"/>

            <label for=checked >选择状态{{checked}}</label>

            <!--  多选框，使用v-model和value实现多选，相等时选中 checked2为数组-->

            <input type="checkbox" v-model="checked2" value="html" id="html"/>

            <label for=html >HTML</label>

            <input type="checkbox" v-model="checked2" value="js" id="js"/>

            <label for=js >js</label>

            <input type="checkbox" v-model="checked2" value="css" id="css"/>

            <label for=css >css</label>

            <!-- options  multiple没有：单选，selected是一个字符串，多选，selected是一个数组-->

            <select v-model="selected" multiple>

                <option v-for="option in options" :value="option.value">{{option.text}}</option>

            </select>

            <!-- 绑定值 -->

            <input type="radio" v-model="picked" :value="value"/>

            <label>单选按钮</label>

            <p>{{picked}}</p>

            <p>{{value}}</p>

 　　　　　　<input type="radio" v-model="picked" :value="value"/>

            <label>单选按钮</label>

            <p>{{picked}}</p>

            <p>{{value}}</p>

</div> </body> </html> <script> var app = new Vue({ el:"#app", data:{ message:"33", picked:"js", value:"123", checked:false, checked2:["html","js"], selected:["html","js"], options:[ { text:"HTML", value:"html" }, { text:"JS", value:"js" }, { text:"CSS", value:"css" } ] } }); </script>

<!--在失去焦点和回车时才会更新message数据-->

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

<!--输入的数据转换成number的类型-->

<input type="number" v-model.number="message"/>

<!--自动过滤输入的首尾空格-->

<input type="text" v-model.trim="message"/>