示例:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-model 会忽略所有表单元素的初始值,会选择 Vue 实例数据来作为具体的值。

多行文本:
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea> 复选框:
<div id='example-3'>
<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>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
}) 单选按钮:
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
}) 选择列表:
<div id="example-5">
<select v-model="selected">//列表选择后即选定关闭列表
<select v-model="selected" multiple>//列表选择后不关闭列表可继续选择
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''//选择结果保存为一个字符串
selected: []//选择结果存为一个数组
}
})

值绑定:绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现

复选框:
<input
type="checkbox"
v-model="toggle"
v-bind
:true-value="a"
v-bind
:false-value="b"
>
// 当选中时 vm.toggle === vm.a
// 当没有选中时 vm.toggle === vm.b 单选按钮:
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时 vm.pick === vm.a 选择列表的选项:
<select v-model="selected">
<option v-bind:value="{ number: 123 }"></option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符:

.lazy
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" > .number
//将用户的输入值转为 Number 类型
<input v-model.number="age" type="number"> .trim
//自动过滤用户输入的首尾空格
<input v-model.trim="msg">

vue-7-表单的更多相关文章

  1. vue的表单编辑删除,保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  2. Vue.js表单校验;动画指令;避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  3. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  4. vue + vuex 表单处理

    使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空. 组件中关联: <template> <el-form ref="form&q ...

  5. vue b表单

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v- ...

  6. Vue(六) 表单与 v-model

    学习使用 v-model 指令完成表单数据双向绑定 基本用法 表单控件在实际业务较为常见,比如单选,多选.下拉选择.输入框等,用他们可以完成数据的录入.校验.提交等.Vue.js 提供了 v-mode ...

  7. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  8. 使用vue做表单验证

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

  9. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

  10. vue form表单绑定事件与方法

    使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...

随机推荐

  1. Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  2. springboot ----> sts如何启动两个实例

    idea 实现启动两个spring boot工程实例的方法 可以参考这篇博客. 因为使用spring tool suite 学习spring cloud 需要实例化两个spring boot 工程来构 ...

  3. English trip V1 - 10.Family Ties 家庭关系 Teacher:Emily Key: Possessive s (所有格 s)

    In this lesson you will learn to talk about people in a family. 课上内容(Lesson) What are you Spring Fes ...

  4. 20180428 xlVBA自动设置成绩条行高

    '自动设置行高 传入工作表Sht 和 每页打印的行数RowsInOnePage Public Sub AutoSetRowHeight(ByVal Sht As Worksheet, Optional ...

  5. 『MXNet』第九弹_分类器以及迁移学习DEMO

    解压文件命令: with zipfile.ZipFile('../data/kaggle_cifar10/' + fin, 'r') as zin: zin.extractall('../data/k ...

  6. 4月22 mysql常用函数

    一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 ...

  7. 关于react16.4——转发refs和片段Fragment

    1.转发refs Ref 转发是一种自动将 ref 通过组件传递给子组件的技术. 一些组件倾向于以与常规 DOM button 和 input 类似的方式在整个应用程序中使用, 并且访问他们的 DOM ...

  8. 51nod-1181-两次筛法

    1181 质数中的质数(质数筛法)  题目来源: Sgu 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 如果一个质数,在质数列表中的编号也是质数,那么就 ...

  9. 推荐系统评测指标—准确率(Precision)、召回率(Recall)、F值(F-Measure)

    下面简单列举几种常用的推荐系统评测指标: 1.准确率与召回率(Precision & Recall) 准确率和召回率是广泛用于信息检索和统计学分类领域的两个度量值,用来评价结果的质量.其中精度 ...

  10. 水题系列二:PhoneNumbers

    问题描述: Phonenumbers 企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一 个容易记 住的 单词或 者短语 .例如 ,你 需要给 滑铁卢 大学打 电话时 ,可 以 ...