你可以用 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. virtualBox虚拟机中安装linux系统并连接

    1.安装virtualBox 1.1.下载 virtualBox是免费的,直接去官网下载 https://www.virtualbox.org/ 在官网左侧找到Downloads,下载需要的版本 1. ...

  2. Unity组件Toggle详解

    1.首先先搭建UI(如下图) 2.如果实现单选的功能需要在Image上面挂载ToggleGroup脚本组件 2.2 选中三个Toggle把ToggleGroup拖到如下图位置即可 2.AllowSwi ...

  3. Python条件语句和基本数据类型

    1.if基本语句 if 条件: 内部代码块 else: ...... 2.if支持嵌套 if 1 == 1: if 2 == 2: print('走一步') else: print('走两步') el ...

  4. UF_CURVE_ask_arc_data圆弧角度

    1 UF_CURVE_arc_t Obj_data; 2 UF_CURVE_ask_arc_data(tObject[i], &Obj_data); 3 double Sp = Obj_dat ...

  5. 如何修改驱动使得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 ...

  6. C# RSA加密解密 签名实现

    class RSACryptoItem { public RSACryptoServiceProvider Provider; public List<byte> PubKeyBytes; ...

  7. 推荐一个json直接导出Excel的网站

    https://wejson.cn/json2excel/

  8. Linux 第七节(LVM，网卡配置)

    LVM 逻辑卷管理器: 解决分区灵活调整大小问题 PV 物理卷 VG 卷组 LV 逻辑卷 pvcreate /dev/sdc vgcreate xiaochong  /dev/sdb /dev/sdc ...

  9. PyTorch Geometric（pyg）学习

    参考2个链接: 第十六课.Pytorch-geometric入门(一)_tzc_fly的博客-CSDN博客_pytorch-geometric 第十七课.Pytorch-geometric入门(二)_ ...

  10. Linux装cudnn

    https://stackoverflow.com/questions/66977227/could-not-load-dynamic-library-libcudnn-so-8-when-runni ...