<div id="app"> <!-- <input type="text" v-model="message"> --> <input type="text" :value="message" @input="message=$event.target.value"> <h2>{{message}}</h2> </div>
<label for="man"> <input type="radio" id="man" value="男" v-model="sex"> </label> <label for="wman"> <input type="radio" id="wman" value="女" v-model="sex"> </label> <h2>你选择的性别是:{{sex}}</h2>
<!-- checkbox 单选框 --> <label for="agree"> <input type="checkbox" id="agree" v-model="ischange">同意协议 </label> <h2>你选择的是:{{ischange}}</h2> <button :disabled="!ischange">下一步</button><br><br><br>
<!-- checkbox 多选框 --> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球 <input type="checkbox" value="排球" v-model="hobbies">排球 <h2>你的爱好是:{{hobbies}}</h2>
<!-- select 单选 --> <select name="" id="" v-model="fruit"> <option value="西瓜">西瓜</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="草莓">草莓</option> </select> <h2>你选择的水果是:{{fruit}}</h2><br><br>
<!-- select 多选 --> <select name="" id="" v-model="fruits" multiple> <option value="西瓜">西瓜</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="草莓">草莓</option> </select> <h2>你选择的水果是:{{fruits}}</h2>
<!-- 值绑定 --> <label :for="item" v-for="item in fruithobbies"> <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}} </label>
<!-- 1、lazy修饰符 --> <label for="active"> <input type="text" id="active" v-model.lazy="message"> </label> <h2>{{message}}</h2>
<!-- 2、number修饰符 --> <!-- 当type的类型为number类型的时候,v-model绑定的值自动变成string类型 --> <input type="number" v-model.number="age"> <h2>{{age}}---{{typeof(age)}}</h2>
<!-- 3、trim 修饰符 --> <input type="text" v-model="trim"> <h2>{{trim}}</h2>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script src="./js/vue.js"></script> </head> <div id="app"> <!-- <input type="text" v-model="message"> --> <input type="text" :value="message" @input="message=$event.target.value"> <h2>{{message}}</h2><br> <label for="man"> <input type="radio" id="man" value="男" v-model="sex"> </label> <label for="wman"> <input type="radio" id="wman" value="女" v-model="sex"> </label> <h2>你选择的性别是:{{sex}}</h2><br> <!-- checkbox 单选框 --> <label for="agree"> <input type="checkbox" id="agree" v-model="ischange">同意协议 </label> <h2>你选择的是:{{ischange}}</h2> <button :disabled="!ischange">下一步</button><br><br><br> <!-- checkbox 多选框 --> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球 <input type="checkbox" value="排球" v-model="hobbies">排球 <h2>你的爱好是:{{hobbies}}</h2><br><br><br> <!-- select 单选 --> <select name="" id="" v-model="fruit"> <option value="西瓜">西瓜</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="草莓">草莓</option> </select> <h2>你选择的水果是:{{fruit}}</h2><br><br> <!-- select 多选 --> <select name="" id="" v-model="fruits" multiple> <option value="西瓜">西瓜</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="草莓">草莓</option> </select> <h2>你选择的水果是:{{fruits}}</h2><br><br> <!-- 值绑定 --> <label :for="item" v-for="item in fruithobbies"> <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}} </label><br><br> <!-- v-model 修饰符 的使用 --> <!-- 1、lazy修饰符 --> <label for="active"> <input type="text" id="active" v-model.lazy="message"> </label> <h2>{{message}}</h2><br> <!-- 2、number修饰符 --> <!-- 当type的类型为number类型的时候,v-model绑定的值自动变成string类型 --> <input type="number" v-model.number="age"> <h2>{{age}}---{{typeof(age)}}</h2><br> <!-- 3、trim 修饰符 --> <input type="text" v-model="trim"> <h2>{{trim}}</h2> </div> <body> <script> let vm = new vue({ el: '#app', data: () => ({ message: 'v-model实现原理', sex: '男', age:0, ischange: true, hobbies: [], fruit: '香蕉', fruits: [], fruithobbies: ['西瓜', '草莓', '香蕉', '苹果', '哈密瓜'], trim:' 去除字符串两边的空格,控制台才能看出来 ' }), methods: {} }) </script> </body> </html>
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论