你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

输入框

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <p>input 元素：</p>

  <input v-model="message" placeholder="编辑我……">

  <p>消息是: {{ message }}</p>

  <p>textarea 元素：</p>

  <p style="white-space: pre">{{ message2 }}</p>

  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Runoob',

    message2: '菜鸟教程\r\nhttp://www.runoob.com'

  }

})

</script>

</body>

</html>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <p>单个复选框：</p>

  <input type="checkbox" id="checkbox" v-model="checked">

  <label for="checkbox">{{ checked }}</label>

  <p>多个复选框：</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>

  <br>

  <span>选择的值为: {{ checkedNames }}</span>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    checked : false,

    checkedNames: []

  }

})

</script>

</body>

</html>

单选按钮

以下实例中演示了单选按钮的双向数据绑定：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <input type="radio" id="runoob" value="Runoob" v-model="picked">

  <label for="runoob">Runoob</label>

  <br>

  <input type="radio" id="google" value="Google" v-model="picked">

  <label for="google">Google</label>

  <br>

  <span>选中值为: {{ picked }}</span>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    picked : 'Runoob'

  }

})

</script>

</body>

</html>

select 列表

以下实例中演示了下拉列表的双向数据绑定：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <select v-model="selected" name="fruit">

    <option value="">选择一个网站</option>

    <option value="www.runoob.com">Runoob</option>

    <option value="www.google.com">Google</option>

  </select>

  <div id="output">

      选择的网站是: {{selected}}

  </div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    selected: ''

  }

})

</script>

</body>

</html>

vue的表单的更多相关文章

  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. Unity 性能分析小工具

    下文有两个方法,分别是一段检测执行过程耗费时间的代码,还有一个是保存和加载Unity Profiler 的代码(因为UnityProfiler 只能显示一部分的数据,如果运行时间长的话有部分分析数据查 ...

  2. Docker 安全加固

    一.docker安全加固 1.利用LXCFS增强docker容器隔离性和资源可见性 (proc容器与宿主机之间是共享的 没有进行隔离) 此rpm包在真机桌面q目录中  需先传到虚拟机/root/下 在 ...

  3. web基础(4): CSS布局与定位

    chapter 5 CSS 布局与定位 web 前端开发的时候不是马上就考虑字体 字号这些细节,而是要先定下布局,也就是页面结构.    右图中一个个栏目就像是"盒子",每个盒子的 ...

  4. 如何修改驱动使得NVIDIA Geforce GTX 970, 980, 980 TI and Titan X等显卡可以在Win XP/Win 2003 server x64下驱动？

    感谢Matt,一个老外,非常好的修改方法. 本人亲测成功. I recently built a new computer to better accommodate the forthcoming ...

  5. 在前端js worker里使用dom并且加载jquery

    四个工具: nodejs + npm npm安装的jsdom npm安装的jquery npm安装的browserify 网址: browserify: https://browserify.org/ ...

  6. aws note

    Amazon EC2 Instance Types https://aws.amazon.com/ec2/instance-types/ My courses - AWS Skill Builder ...

  7. Linux下安装MongoDB的Database Tools并配置

    安装tools以使用导入导出功能.解决mongodump: command not found #下载 wget https://fastdl.mongodb.org/tools/db/mongodb ...

  8. 尝试在virtualbox虚拟机中fedora30中实现文件夹共享

    $ sudo dnf install gcc kernel-devel kernel-headers dkms make bzip2 perl $ rpm -qa|grep kernel|sort 确 ...

  9. python37

    Python 循环嵌套 Python 语言允许在一个循环体里面嵌入另一个循环. Python for 循环嵌套语法: for iterating_var in sequence: for iterat ...

  10. jmeter压测dubbo接口，参数为dto时如何写传参及有错误时的分析思路

    一.传参 1. 无论dubbo接口传参是否为dto,所有参数都是在args的tab传进去的. 2. 如果dto中有自定义对象,paramType为自定义dto名,paramValue为其他参数组成的j ...