10、VueJs处理表单内容

阅读() @2018-07-15 14:13:44

本节介绍VueJs在表单元素上的应用。

html部分:

<p>单个复选框:</p>
<input type="checkbox" id="checkbox" v-model="checked">

<p>多个复选框:<b>全选</b><input type="checkbox" v-model="checkedNames" /></p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<span>选择的值为: {{ checkedNames }}</span>

<p>单选框:</p>
<input type="radio" name="sex" v-model="radioChecked" />
<input type="radio" name="sex" v-model="radioChecked" />
<input type="radio" name="sex" v-model="radioChecked" />

<p>下拉选择框:</p>
<select v-model="selectChecked" name="city">
    <option value="0">---请选择城市---</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>
{{selectChecked}}

js部分:

var app = new Vue({
    el : '#wrap',
    data : {
        message : '1',
        checked : true,
        checkedNames : false,
        radioChecked : true,
        selectChecked : '',
        age : ' 23 '
    }
});

在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

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

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

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

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

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

本节完!

微信二维码