你可以用 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. java 将yyyyMMddHHmmss转化为yyyy-MM-dd HH:mm:ss格式的字符串

    思路很简单:先转化为yyyyMMddHHmmss格式的Date类型,再格式化为yyyy-MM-dd HH:mm:ss格式的字符串类型 import java.text.DateFormat; impo ...

  2. Tech&W_STU_Resource_bookmark

    整合资料 1 architecture: Enterprise integration patterns : https://www.enterpriseintegrationpatterns.com ...

  3. jquery 中根据日期计算天数，以及去掉字符串中的空格

    //方法 增添dayNumber天 ,dates:日期 年月日 function SubDay(dayNumber, dates) { var date= new Date(dates ); date ...

  4. HANDLE和HMOUDLE、HWND讲解

    HWND是线程相关的,通常指明窗口句柄,通过句柄找到窗口所属进程和线程 Handle 是代表系统的内核对象,如文件句柄,线程句柄,进程句柄.系统对内核对象以链表的形式进行管理,载入到内存中的每一个内核 ...

  5. java-javaSE-泛型和反射

    泛型 什么是泛型 泛型,即"参数化类型".顾名思义,就是将类型参数化,然后在使用/调用时传入具体的类型(类型实参). 为什么使用泛型 泛型提高程序操作的可读性和安全性. 例如集合类 ...

  6. win10如何设置共享媒体流？

    一.win10设置媒体流共享   1 电脑开机后,点击右下角的"网络连接-网络和Internet设置".   2 进入设置界面后,点击"网络和共享中心".   ...

  7. (原创)odoo14下qweb模板的前端与后端语法区别

    1.后端(qweb打包) 后端使用t-inherit 指定继承的模板,使用t-inherit-mode 指定继承的模式,使用xpath定位标记,使用position指定扩展位置. 2.前端 前端仍旧使 ...

  8. （0403）位运算符+interface

    1)interface 2)位运算符

  9. 【二】python学习总结

    一i.python概念 python是一种解释型语言,速度比java慢 二.运算符和格式输出.导入 1.Python3 运算符 | 菜鸟教程 (runoob.com) 2.格式输出 %  和.form ...

  10. 接口测试工具POSTMAN的使用

    接口测试工具postman python ------------------------------------ 作为后端,写好了接口,我们自己要测试通过,再给别人用 --------------- ...