3、表单输入绑定

 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

 

　　　　　<!-- 单选框 -->
        <input type="radio" name="name1" id="name1" v-model="sex" value="1">
        <label for="name1">man</label>
        <input type="radio" name="name1" id="name2" v-model="sex" value="2">
        <label for="name2">wuman</label>
        <br>
        <br>
        <!-- 复选框 -->
        <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>

        <!-- 单选菜单 -->
        <select name="" id=""  @Change="slEvent()"  v-model="selectVal">
            <option disabled value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

 

 

 

 

 v-model指令用于表单数据双向绑定，针对一下类型:

text、textarea多行文本、radio、checkbox、select

 

1:主要用于 input，select，textarea，component

2:修饰符：

    .lazy- 取代input监听change事件

    .number- 输入字符串转为数字

    .trim- 输入首尾空格过滤

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

 

 

<input v-model.number="age" type="number">

<input v-model.trim="msg">

 

 

v-model触发事件

v-model="res"

function res() {

 

}