你可以用 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. 【MySQL】MySQL时区问题、数据库时间相差8小时问题解决

    解决:修改MySQL系统时区,改为东8区. 在命令行界面或者可视化工具下(如:Navicat)依次运行以下命令. 1.查询当前系统时间 select now(); 2.检查MySQL系统时区 show ...

  2. centos系统时间与硬件时间不一致

    centos系统时间与硬件时间设置.同步 将系统时间设置成2018年7月31日 12:00:00 date -s "07/31/18  12:00:00" hwclock -s 将 ...

  3. 3dsmax+vray5进行分布式渲染

    环境 我的两台电脑软件是一样的:win11 + 3ds max 2020 + vray5 update 2.2. 台式机1硬件是12900 + RTX 3080 Ti,台式机2硬件是12900KF + ...

  4. Java-封装结果集示例

    1 @Data 2 public class ResultData implements Serializable { 3 4 /** 5 * 状态码 6 */ 7 private String co ...

  5. python APScheduler用法

    参考: https://blog.csdn.net/weixin_44799217/article/details/127353134 https://blog.csdn.net/weixin_428 ...

  6. Delphi 新语法：泛型

      这里的新语法一般指Delphi7不支持的语法,高版本中会经常遇到,所以花一点时间学会使用它.泛型是一种特殊的类型.你不用一开始就指明参数的具体类型,而是先定义一个类型变量,在使用的时候再确定参数的 ...

  7. Jenkins安装和自动化部署

    1.Jenkins安装机器安装要求可以参考官网 https://www.jenkins.io 2.下载jenkins的war包上传到linux上部署 3.安装jdk.git.maven 3.1.安装j ...

  8. Ubuntu中恢复rm命令误删文件(超级详细+亲测有效)

    Ubuntu中恢复rm命令误删文件(超级详细+亲测有效) 置顶 2019年05月27日 11:13:12 rain_Man2018 阅读数 40   在实验室做项目时使用的是ubuntu16.04 某 ...

  9. Qt 按键添加图标

    1.开发环境:Qt5.12.2,QtCreate4.8.2 2.直接上代码 /* 按键上背景 */ QPixmap pixmap(":/Resourses/images/easyicon_n ...

  10. 学习-Vue2-Vue实例-数据与方法-数据的响应式

    当一个实例被创建时,它将data对象中的所有的property加入到Vue的响应式系统中. 当这些property的值发生改变时,视图将会产生"响应",即匹配更新为新的值.当这些数 ...