vue中input的v-model清空操作
问题来源
写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错。但是如果不修改父级无法更新值,也会带来开发的问题。
解决
v-model 完成大部分数据双向绑定
<input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.value)" @focus="$emit('focus',$event.target.value)" @input ="$emit('input',$event.target.value)" >
四个事件将input的事件传递,在父级使用
<g-input v-model="num"></g-input>
但是在清空操作上出现难题,因为无论怎么操作都无法触发vue上的数据驱动,简单清空子组件上的维护的数据是没有同步到父级上的,这里无疑最佳方案就是单向的数据流,让子组件发生事件时通知父级,父元素传值发生改变,进而改变子组件。不过感觉这样做就违背使用v-model的初衷,但是也没有办法了
对要进行监听的dom绑定事件
子组件中:
<div @click="clear"> <g-icon></g-icon> </div>
将需要清空数据的消息告诉父级
clear(){ this.$emit('inputclear',{clear:''}) }
以上两种可以合并成
<div @click="$emit('inputclear',{clear:''})"> <g-icon v-if="isClearShow" icon="error" class="clearForInput" ></g-icon> </div>
父级中:
<g-input v-model="num" @inputclear="num = $event.clear"></g-input>
现在就可以了
总结
以上所述是小编给大家介绍的vue中input的v-model清空操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="text" v-model="msg"><br> {{msg}} </div> js里data初始化数据 <script src="./js/vue.js"></script> <script
-
vue监听input标签的value值方法
由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/
-
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
在用vue-cli脚手架搭建手机H5页面应用的时候,其中一页中部有input,底部有position:absolute:bottom:0的元素, 当点击input框时在安卓手机上出现了: 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用,因为这里是路由页面,根据网上的思路,吊起输入键盘的时候页面的高度是变化的,监听window.onresize,判断是否吊起键盘,然后设定底部模块的隐藏和显示,整个块元素的margint
-
Vue单页面应用保证F5强刷不清空数据的解决方案
问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.setItem('mobileState', JSON.stringify(state)); }) if (sessionStorage.getItem('mobileState')) { state = JSON.parse(sessionStorage.getItem('mobileState')); }
-
vue点击input弹出带搜索键盘并监听该元素的方法
1.遇到问题: 需要做一个点击input弹出带搜索的键盘. 解决: input的type="search",可弹出带搜索的键盘.并监听搜索按钮,请求数据 <input @keyup.13="show()" type="search"> 2.但是又遇到一个新的问题: 点击搜索之后键盘没有收回. 解决: 通过$refs获取input 监听搜索按钮,添加.blur() <input @keyup.13=show() type=&quo
-
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc
-
vue.js input框之间赋值方法
如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va
-
vue中input的v-model清空操作
问题来源 写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错.但是如果不修改父级无法更新值,也会带来开发的问题. 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.va
-
八个Vue中常用的v指令详解
目录 Vue中常用的8种v指令 1 v-text 指令 2 v-html 指令 3 v-on 指令 案例:计数器 4 v-show 指令 5 v-if 指令 6 v-bind 指令 7 v-for 指令 8 v-on 补充 总结 Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text=“变量/表达式” 文本的设置字符串变量+数字可以直接写是拼接字符串如果出现要使用外部不相同的引号 v-html=“变量” 文本或者页面的设置
-
vue 限制input只能输入正数的操作
在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. <input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.
-
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(debounce),在网上想找个现成的用下,但是好多都不对,于是就自己搞了. 先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 函数节流(throttle)
-
vue 中使用print.js导出pdf操作
1.print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") {
-
vue中js判断长时间不操作界面自动退出登录(推荐)
需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne
-
vue中v-model对select的绑定操作
1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }
-
vue中的.$mount('#app')手动挂载操作
在Vue构造函数时,需要配置一个el属性,如果没有没有el属性时,可以使用.$mount('#app')进行挂载. 配置了el属性: new Vue({ el:"#app", router }); 如果没有配置el属性,可以使用手动挂载$mount("#app") new Vue({ router }).$mount('#app'); var vm = new Vue({ router }); vm.$mount('#app'); 补充知识:Vue手动挂载组件$mo
-
在vue中axios设置timeout超时的操作
在做vue项目的时候,由于数据量查询比较大,所以前台调用接口数据的时候,往往要等很久,所以需要设置个超时,当超过设置时间就让向页面返回一个状态,让使用者不用一直等. 通过官网api查询,对其超时讲解不是很多,但其和Jquery中请求非常类似 Jquery请求方式 $.ajax({ url: '接口地址', type:'get', //请求方式get或post data:{}, //请求所传的参数 dataType: 'json', //返回的数据格式 timeout: 4000, //设置时间超
-
在vue中使用eslint,配合vscode的操作
不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性.这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉. 每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正.安装步骤如下: 首先安装eslint插件 安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加
随机推荐
- SQL2005 学习笔记 窗口函数(OVER)
- Windows XP系统注册表六则设置技巧
- Linux内核模块和驱动的编写
- 详解CentOS7防火墙管理firewalld
- python通过索引遍历列表的方法
- 使用JavaScript制作一个简单的计数器的方法
- js 匿名调用实现代码
- PHP实现图片批量打包下载功能
- PHP基于CURL进行POST数据上传实例
- Android View 布局流程(Layout)全面解析
- 在MySQL中使用STRAIGHT_JOIN的教程
- php单例模式实现方法分析
- javascript实现的HashMap类代码
- js滑动提示效果代码分享
- 详解Ruby中的异常
- jQuery .attr()和.removeAttr()方法操作元素属性示例
- php使用qr生成二维码的示例分享
- JS解密入门 最终变量劫持
- 关于JavaScript的面向对象和继承有利新手学习
- C#读取计算机CPU及HDD信息的方法