vue 表单输入绑定

v-model在input,'textarea','select'中创建元素双向绑定

单选框radio

<div id="app">
      //注意必须设置value值
      <input type="radio" v-model="sex" id="male" value="男">
      <label for="male">男</label>
      <input type="radio" v-model="sex" id="female" value="女">
      <label for="female">女</label>
</div>
<p>{{sex}}</p>

var vm = new Vue({
     el:"#app",
     data:{
            sex:""
      }
})

radio.jpg

---

复选框checkbox

<div id="app">
      //注意必须设置value值
    <input type="checkbox" id="sport" value="运动" v-model="likes" />
    <label for="sport">运动</label>
    <input type="checkbox" id="lookbook" value="看书" v-model="likes" />
    <label for="lookbook">看书</label>
    <p>{{likes}}</p>
</div>

var vm = new Vue({
     el:"#app",
     data:{
            likes:''
      }
})

checkbox.jpg

单个复选框

<div id="app">
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
    <p>{{toggle}} </p>
</div>
![![fal.jpg](https://img.haomeiwen.com/i15605343/98799fa50e12feaf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://img.haomeiwen.com/i15605343/b02041dc39ea2645.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

var vm = new Vue({
     el:"#app",
     data:{
            toggle:''
      }
})

1.jpg

---

选择下拉框select

<div id="app">
    <select name="city" v-model="op" id="">  
        <option value="" disabled>请选择</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="上海">上海</option>
    </select>    
    <p>{{op}}</p>
</div>

var vm = new Vue({
     el:"#app",
     data:{
            op:''
      }
})

select.jpg

---

v-model修饰符

.lazy使得数据在change时更新,与@change相似

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

.number 使得获取到的用户输入的内容为数值类型

<input type="text" v-model.number="num" />
<p>{{num}}----{{typeof(num)}}</p>//1----number

trim去除首尾的空格(字符之间的不能去掉)

表单事件

change在用户输入完成后失去焦点或回车之后触发

<input @change="test" v-model.trim="str"> 

input在用户输入内容时立即触发

<input @input="test" v-model="str">