2020-9-5,input双向绑定

最新推荐文章于 2024-05-02 18:44:51 发布
最新推荐文章于 2024-05-02 18:44:51 发布
阅读量185 收藏
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33359745/article/details/108418696
版权

vue模拟input[type=‘number’] 组件功能。
父组件传入最大值，最小值，step

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
      <style>
          [v-cloak]{
              display: none;
          }
          .inputBox{
              position: absolute;
          }
          .inputBox button{
              width: 30px;
          }
          .inputBox input{
              padding-left:10px;
              width:100px;
          }
      </style>
  </head>
<!--
    1.传入值类型判断
    2.初始化值范围判断
    3.按钮判断（min,max）
    4.输入值判断(类型，大小)
 -->
    <body>
        <div id="app">
            <input-box v-model="value" :step="step" :min="min" :max="max"></input-box>
        </div>
<!--       <div id="app">-->
<!--            // 组件，由父组件传入max，min，及绑定的v-model-->
<!--&lt;!&ndash;            <num-con v-model="value" :max="10" :min="0"></num-con>&ndash;&gt;-->
<!--       </div>-->
       <script>
       // 第一版
           // 判断是否存在数字可以匹配
           // function isValueNurnber (value) {
           //     return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value);
           // }
           // var numCon={
           //     // 模板中有一个input，绑定change事件
           //     // 两个button绑定up和down事件，设置disabled条件。
           //     template:'<div><input type="text" :value="count" @change="handlechange"><button @click="handledown" :disabled="count<=min">-</button>' +
           //         '<button @click="handleup" :disabled="count>=max">+</button></div>',
           //     data:function () {
           //          // 存储初始化时父组件传入的值
           //          return {
           //              // 子组件接收的父组件的值
           //              // 浅拷贝
           //              count:this.value
           //          }
           //     },
           //     mounted(){
           //         // 挂载时判断传入值范围。修改数字
           //         this.updateVal(this.value);
           //     },
           //      props:{
           //          // 外面传进来的值 max、min、value
           //         max:{
           //             type:Number,
           //             default:Infinity
           //         },
           //          min:{
           //             type:Number,
           //              default: Infinity
           //          },
           //          value:{
           //             type:Number,
           //              default:0,
           //          }
           //      },
           //     methods:{
           //         // 判断范围。
           //         handledown(){
           //             if(this.count<=this.min) return;
           //              this.count--;
           //         },
           //         // 判断范围
           //         handleup(){
           //             if(this.count>=this.max) return;
           //             this.count++;
           //         },
           //         // 输入事件
           //         handlechange(event){
           //             // 获取输入的值，去除空格
           //             var val = event.target.value.trim();
           //             var max = this.max;
           //             var min = this.min;
           //             if(isValueNurnber(val)){
           //                 val = Number(val);
           //                 this.count=val;
           //                 if(val>max){
           //                     this.count = max;
           //                 }
           //                 else if(val<min){
           //                     this.count = min;
           //                 }
           //             }else{
           //                 event.target.value=this.count;
           //             }
           //         },
           //         updateVal(val){
           //             val = val>this.max?this.max:val;
           //             val = val<this.min?this.min:val;
           //             this.count=val;
           //         },
           //
           //     },
           //     watch:{
           //         // 监听父组件数据是否改变，子组件跟着改变。
           //         value:function(newVal){
           //           this.updateVal(newVal);
           //         },
           //         count:function(val){
           //             // count改变则告知父组件
           //             // 通过v-model绑定了
           //             this.$emit('input',val);
           //             // this.$emit('on-change',val)
           //         }
           //     }
           //
           // };
           // var app = new Vue({
           //     el:'#app',
           //     components:{
           //         numCon,
           //     },
           //     data:{
           //         value:5,
           //     },
           //     methods:{
           //         check(value){
           //             console.log('输出'+(value===this.value))
           //         }
           //     }
           // })
           // 第二版，增加两个小功能。
           function isNumVal(val){
               return /(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/.test(val);
           }
           var inputBox={
               template:'<div class="inputBox"><button :disabled="num<=min" @click="reduce">-</button><input type="text" @keydown="down" @keyup.40="reduce" @keyup.38="add" :value="num" @change="changNum"><button :disabled="num>=max" @click="add">+</button></div>',
               props:{
                   value:{
                       type:Number,
                       default:0,
                   },
                   min:{
                       type:Number,
                       default: -Infinity,
                   },
                   max:{
                       type:Number,
                       default:Infinity
                   },
                   step:{
                       type:Number,
                       default:1,
                   }
               },
               data:function(){
                   return {
                       num : this.value,
                       // 初始化时将父组件的值传给子组件
                       // 在子组件操作num
                       count:this.step
                   }
               },
               mounted() {
                   this.updateNum(this.value);
               },
               methods:{
                   add(){
                        if(this.num+this.count >this.max) return;
                        this.num+=this.count;
                   },
                   reduce(){
                       if(this.num-this.count <this.min) return;
                       this.num-=this.count;
                   },
                   down(event){
                       event.preventDefault();
                   },
                   changNum(event){
                       var val = event.target.value;
                       // 手动输入文本，通过元素获取值
                        if(isNumVal(event.target.value)){
                            val = Number(val);
                            if(val < this.min){
                                val = this.min;
                            }
                            if(val >this.max){
                                val = this.max;
                            }
                            this.num = val;
                        }else{
                            // 不是数组，不改变
                            event.target.value = this.num;
                        }
                   },
                   updateNum(val){
                       // 对val进行修改。
                       if(val<this.min){
                           val = this.min;
                       }
                       if(val>this.max){
                           val=this.max;
                       }
                       this.num = val;
                   }
               },
               watch:{
                   // 监视父组件value的改变
                   value:function (newVal,oldVal) {
                        // 判断范围
                       if(newVal<this.min){
                           newVal = this.min;
                       }
                       if(newVal>this.max){
                           newVal = this.max;
                       }
                       this.num = newVal;
                   },
                   num:function (newVal) {
                       // 通过v-model，子元素触发input，会将父元素传入的值修改为相同的值。
                       this.$emit('input',newVal);
                   },
                   step:function (newVal) {
                       this.count=newVal;
                   }
               },
           }
           var app = new Vue({
               el:'#app',
               data:{
                   value:5,
                   min:0,
                   max:10,
                   step:2,
               },
               components:{
                   inputBox,
               }
           })
       </script>
    </body>
N_ora
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE-Table上绑定Input通过render实现双向绑定数据的示例
12-29
效果 HTML的Table <Table width=100% height=500 size=small columns=columns7 stripe=true data=data></Table> JS代码 [removed] export default { data () { return { ... title: '序号',
input双向绑定详解
qq_45992946的博客
04-21 6637
1.使用原生实时监听input输入框的值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
小程序记：input双向数据绑定
热门推荐
lizhen_software的博客
08-13 4万+
长时间使用VUE，发现v-model确实很好用，用了小程序之后，才发现小程序的双向绑定那么难用，必须有个bindinput来触发改变值。 经过研究发现，小程序的双向绑定也可以实现，但是稍复杂点，思路和大家说一下，最后附代码： 1、利用bindinput来触发改变 2、利用data-name来绑定获取的数据 3、bindinput触发时利用event获取，name的值，然后用this.set...
小程序input实现双向数据绑定
poppy995的博客
10-26 1086
给input组件的input事件添加inputWatch事件 wepy框架的写法 <input @input="inputWatch(weight)" class="input-inline" /> js // 输入监听 inputWatch(text, e) { this.bindForm[text] = e.detail this.$apply...
vue 循环出来的input如何做双向绑定
qq_49080170的博客
09-17 1161
vue 循环出来的input如何做双重绑定
基于el-input的封装,实现双向绑定
weixin_49885784的博客
10-20 769
基于el-input的封装,实现双向绑定
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
解决vue项目input输入框双向绑定数据不实时生效问题
10-15
主要介绍了解决vue项目input输入框双向绑定数据不实时生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
小程序input数据双向绑定实现方法
10-16
主要介绍了小程序input数据双向绑定实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序如何实现input双向绑定
lanseguhui的博客
01-06 4561
微信小程序本身只可以进行单向绑定，从js到html的绑定可以进行响应，但是html到js是不能响应的 我们在html中使用input标签进行信息的填写，同时我们希望在对应的js中可以时刻监听，获取到页面上的数据。 <view><text>*</text><text>电话:</text><input bindinput="...
VUE封装el-input形成双输入框组件，绑定同一个变量
桃桃小鱿鱼的博客
11-11 4068
输入血压，年龄范围等，支持数组和逗号分割两种形式
vue实现双向绑定的两种方式
shaonian1996
05-03 1067
第一种：利用 $refs 属性 <div id="app"> 请输入名字：<input ref='name' type="text" v-on:keyup='change'> <p>{{name}}</p> </div> <script type="text/javascript"> new Vue({ ...
element-ui的bug记录
nick_zhang的博客
04-29 549
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 543
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
自定义表单元素组件内容变化触发ElForm重新校验
最新发布
东逝水
05-02 492
写一个FeeTypeSelector的组件，它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中，也能正常的校验。不过我今天发现，Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失，而不需要点击提交按钮调用form.validate方法，而上面的自定义组件就不能。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 785
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
Electron-Builder 打包 Vue 项目避坑指南
米糊的头发箱（码代码掉的头发都在这里了）
05-02 498
最近在开发一个基于 Vue 的 Electron 项目，在打包时遇到了诸多问题，为了解决这些问题也查阅了非常多的资料，排除了很多坑。现在将可能遇到的问题整理成避坑指南，供大家参考（此避坑指南后续还会继续更新）。
公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)
weixin_66413741的博客
04-30 1269
本共享汽车管理系统有管理员和用户。管理员功能有个人中心，用户管理，投放地区管理，汽车信息管理，汽车投放管理，汽车入库管理，使用订单管理，汽车归还管理。用户可以在注册登录，可以对汽车进行使用产生订单，还可以归还。因而具有一定的实用性。本站是一个B/S模式系统，采用Spring Boot框架，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得共享汽车管理系统管理工作系统化、规范化。
Vue(9)
daiism的博客
05-02 447
/ 跨域 http://localhost:80 http://localhost:90。// cors jsonp nginx 代理 解决跨域问题的几种方案。// 写了await必须写async。// 普通数据类型不是响应式。// 复杂数据类型是响应式。// 协议 域名 端口。
el-input与v-model双向绑定
09-02
el-input与v-model双向绑定是Vue.js中常用的实现双向数据绑定的方法。通过在el-input组件上使用v-model指令，可以将el-input组件与一个数据属性进行双向绑定。当el-input组件的值发生变化时，绑定的数据属性也会相应地更新；反之，当绑定的数据属性发生变化时，el-input组件的值也会相应地更新。 具体实现方式如下所示： - 在el-input组件上使用v-model指令，将其绑定到一个数据属性上，如v-model="value"。 - 在Vue实例的data属性中定义value属性，作为双向绑定的数据。 - 当el-input组件的值发生变化时，绑定的value属性会自动更新。 - 当value属性的值发生变化时，el-input组件的值也会自动更新。 例如，在一个表单中使用el-input与v-model双向绑定的示例代码如下： ``` <template> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="* 通知标题"> <el-input v-model="form.title" placeholder="请输入通知标题"></el-input> </el-form-item> <el-form-item label="* 通知内容"> <el-input type="textarea" v-model="form.desc" placeholder="请输入通知内容"></el-input> </el-form-item> </el-form> <div class="textContent"> <p>{{ form.title }}</p> <p>{{ form.desc }}</p> </div> </template> <script> export default { name: "messageform", data() { return { form: { title: "", desc: "", }, }; }, mounted() {}, methods: {}, }; </script> ``` 在上述示例代码中，el-input组件的值通过v-model与form对象中的属性进行双向绑定。当el-input组件的值发生变化时，form对象中的相应属性也会更新；反之，当form对象中的属性发生变化时，el-input组件的值也会相应地更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-input 只能输入数字类型及v-model双向绑定失效问题](https://blog.csdn.net/weixin_45642483/article/details/115907537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue实现双向数据绑定 v-model](https://blog.csdn.net/Summer_JK/article/details/109162142)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue循环中多个input绑定指定v-model实例](https://download.csdn.net/download/weixin_38683721/13126213)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值