vue表单输入绑定示例

最新推荐文章于 2024-04-13 13:23:31 发布
最新推荐文章于 2024-04-13 13:23:31 发布
阅读量134 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44631242/article/details/109194328
版权 
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </script>
    <title>表单输入绑定</title>
  </head>
  <body>
      <!--v-model 数据的双向绑定，只要改变一个值，其它的值也会跟着做出相应改变 。当在文本框中每输入一个字符时{{name}}都将会
    随之发生改变，会大大的影响性能，需要用修饰符.lazy进行改善-->
      <div id="app">
          <h2>{{name}}</h2>
          <h1>单行文本输入框</h1>
          <input type="text" name="username" v-model.lazy="name" value=""/>
          <h1>多行文本输入框</h1>
          <textarea rows="" cols="" v-model="name"></textarea>
          <h1>复选框</h1>
          <span v-for="item in fruits">
              {{item}}
          <input  type="checkbox" name="fruit" v-model="checkfruits" :value="item"/>
          </span>
          <h2>{{checkfruits}}</h2>
          <h1>单选框</h1>
          <span v-for="item in fruits">
              {{item}}
              <input type="radio" name="fruit" v-model="radiofruits" :value="item"/>
              </span>
              <!-- 选项下拉框，绑定v-model后，choosecity初始化为空 -->
              <!-- <h1>选项框(下拉框)</h1>
              <select v-model="choosecity">
                  <option  v-for="item in citys" :value="item">{{item}}</option>
                  </select>
                  <h3>{{choosecity}}</h3> -->
                  <!-- 选项多选框，喜欢的城市可以是多个 ,mutiple属性可以是多选-->
                  <h3>选择喜欢的城市</h3>
                  <select v-model="morecitys" multiple="multiple">
                      <option v-for="item in citys" :value="item">{{item}}</option>
                  </select>
                  <h3>{{morecitys}}</h3>
                  <h3>修饰词</h3>
                  <input type="number" v-model.number="phone" placeholder="请输入你的电话"/>
      </div>
      <script>
         var vm=new Vue({
             el:"#app",
             data:{
                 name:"小明",
                 fruits:["苹果","雪梨","香蕉"],
                 checkfruits:[],
                 radiofruits:"",
                 citys:["北京","上海","深圳"],
                //  choosecity:"",
                morecitys:[]

             }
         })
          </script>
  </body>
</html>

在这里插入代码片
梦想十万里
关注
Vue表单输入绑定的示例代码
10-17
在Vue中，`v-model` 是实现表单输入和应用状态之间双向绑定的指令。它在内部为不同的输入元素使用不同的属性并抛出不同的事件： 1. 对于文本和多行文本框，`v-model` 使用 `value` 属性和 `input` 事件。 2. 对于复...
前端_Vue_7.表单输入绑定
三千幻想乡
12-22 932
对于需要使用IME（Input Method Editor，输入法编辑）的语言（中日韩文），你会发现 v-model 不会在 IME 输入还在拼字阶段时出发更新。true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。因此，我们建议提供一个空值的禁用选项，如上例所示。HTML表单用于搜集不同类型的用户输入，它表示网页文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到Web服务器。
Vue表单输入绑定
十三阿哥的博客
05-30 1239
vue表单输入绑定
『VUE』16. v-model表单输入和绑定（详细图文注释）
最新发布
MZH
04-13 1827
『VUE』16. v-model表单输入和绑定（详细图文注释）
VUE表单数据绑定
qq_34400242的博客
05-03 2300
可以用 v-model 指令在表单input、textarea及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 tips:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而...
vue3-表单输入绑定
wdk996的博客
01-18 776
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合。
Vue 表单控件绑定的实现示例
11-30
本文介绍了Vue 表单控件绑定的实现示例，感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法...
模拟vue双向数据绑定示例
08-12
在这个“模拟vue双向数据绑定示例”中，我们将深入探讨这一机制。 首先，双向数据绑定是Vue.js中的一个关键概念，它基于MVVM（Model-View-ViewModel）模式实现。MVVM模式中，ViewModel作为模型和视图之间的桥梁，...
七.vue基础-表单输入绑定
weixin_43167546的博客
12-11 389
文章目录七.vue基础-表单输入绑定一.基础用法文本多行文本复选框单选按钮选择框二.值绑定 七.vue基础-表单输入绑定 一.基础用法 可以使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定. v-model会忽略所有的表单元素的value、checked和selected特性的初始值而总是将Vue实...
Vue--表单输入绑定
qq_45954420的博客
03-08 1785
一、基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 1.注意 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同
表单输入绑定
langmanboy的博客
05-24 1352
表单输入绑定 1. 双向绑定 数据的绑定，无论是使用插值表达式 {{}} 还是 v-text 指令，对于数据间的交互都是单向的，只能将 Vue 实例里定义的值传递给页面，页面数据的任何操作无法传递给 model 1-1 v-model使用 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 v-model 是语法糖，默认情况下相当于 :value 和 @inp
Vue——表单输入绑定
hulin的博客
04-09 1200
Vue的表单输入绑定
vue中的表单输入绑定
TeFuir__Lv的博客
12-08 164
vue中的表单输入绑定
vue表单输入绑定
m0_51281306的博客
04-12 1380
v-model 指令 • 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据 绑定。 • 首先我们来体验一下双向数据绑定的效果。 输入框绑定 表单数据绑定 输入框绑定 • 输入框分为单行输入框 input 与多行输入框 textarea。 单选按钮绑定 表单数据绑定单选按钮绑定 • 单选按钮的双向数据绑定方式如下 复选框绑定 表单数据绑定复选框绑定 • 复选框...
vue表单输入绑定(实例)
weixin_44575660的博客
07-26 199
使用v-model(双向数据绑定)自动收集数据text/textarea、checkbox、radio 、select <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单输入绑定</title> </head> <body> <div id="demo"> <form acti
十五、Vue表单输入绑定
凌枫ozo的博客
03-15 295
Vue表单输入绑定 基础用法 你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model会忽略所有表...
09、Vue表单输入绑定
Dhun_LI的博客
09-14 178
Vue表单输入绑定   这两天等待教资审核等到崩溃，还好报上名了，然后就继续学习vue了，今天学习的是Vue表单输入绑定，要实现的是使用v-model（双向数据绑定）自动收集数据，今天只是学了一部分。 效果图如下： 这里主要是带选择框的表单提交，完整代码如下： <body> <!-- 1.使用v-model（双向数据绑定）自动收集数据 text/textarea radio select --> <div id="demo"> <f
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值