vue 按钮删除input内容_Vue表单和v-model
一、基本用法
1、文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
我们绑定了v-model,当我们对message进行修改的时候,它会自动显示到页面上
点击按钮前
点击按钮后
我们修改了我们的内存,页面会发生变化
如果用户对input进行修改,message也会自动变化
这个就是双向绑定
2、多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
3、复选框
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
使用label包住input就无需使用id
多个复选框,绑定到同一个数组:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({ el: '...', data: { checkedNames: [] } })
如果数据库要存数字
4、单选按钮
5、选择框
如果想多选使用,multiple
6、form用来提交
使用button+form的组合
二、3个修饰符
1、.lazy
在默认情况下,v-model
在每次input
事件触发后将输入框的值与数据进行同步 。可以添加lazy
修饰符,从而转为在change
事件_之后_进行同步
v-model默认会监听
a、input事件:键盘、鼠标、以及任何输入设备的输入
b、change事件:只在input失去焦点时触发
点击密码框后(失去焦点)才会变化
2、.number
如果想自动将用户的输入值转为数值类型,可以给v-model
添加number
修饰符
3、.trim
如果要自动过滤用户输入的首尾空白字符,可以给v-model
添加trim
修饰符
三、v-model
本质等价于
vue的双向绑定就是v=model,v-model可以实现绑定一个变量,在变量变化的时候UI发生变化,用户改变UI的时候数据也会变化,v-model实际上是v-bind:value和v-on:input的语法糖。如果是原生的input,那么v-on:input = "xxx = $event.target.value",如果是自定义的组件,v-on:input = "xxx = $event”
四、使用Ant Design of Vue
参考教程
安装
yarn add ant-design-vue
完整引入
可模仿
Ant Design Vuewww.antdv.com
vue 按钮删除input内容_Vue表单和v-model相关推荐
- Vue.js+ElementUI+vant生成动态表单配置
前言 我司最近在搭建一款后台管理系统,使用的是Vue全家桶配合Element-ui,遇到一个问题,需要处理很多的表单,所以想到的解决方案是通过后台配置生成动态表单,这对于我来说也算是新的挑战,涉及的功 ...
- html 禁用回车提交,HTML防止input回车提交表单
原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...
- 解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式 一,应用/ X WWW的窗体-ur ...
- [vue] 写出你知道的表单修饰符和事件修饰符
[vue] 写出你知道的表单修饰符和事件修饰符 事件修饰符.stop .prevent .capture .self .once .passive 表单修饰符.number .lazy .trim 个 ...
- activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍 基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来 工具地址: http://tools.xiaoyaoji.cn/form Gi ...
- 基于Vue,ElementUI开发的一款表单设计器
介绍 基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来 工具地址:http://form.making.link GitHub地址:h ...
- 获取当前按钮所在行的input_form表单的input上传文件
在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用 首先文件的上传需要一个type=file的input.它的意义就是上 ...
- 微信小程序点击button按钮后重置输入框等表单内容
效果如图 wxml如下图 在js文件中设置 /*** 重置条件*/resetSalaryBtnClick: function (e) {this.setData({minben: "&quo ...
- vue 表单验证正则_vue表单验证
首先需要自己写正则表达式,正则学得不好就不乱指点了=> 方法 1如果你是单独建的js文件 先引入正则表达式文件才进行下一步 或者直接在组件内写正则 2data({ const regExpID ...
最新文章
- Maven3路程(三)用Maven创建第一个web项目(1)
- java fft 频谱算法_快速傅里叶变换(FFT)算法原理及代码解析
- *ctf 逆向math题解
- C#中提示:可访问性不一致:参数类型XXX比方法XXX的可访问性低
- Docker:Redis启动命令
- 修改gitignore 后不起作用
- 转:libev和libevent的设计差异
- Linux 终端显示 Git 当前所在分支 1
- python教程视频哪个好-Python教学视频哪个好?老男孩Python培训
- OpenCV对矩形填充透明颜色
- php检索条件丢失,php – 从SQL Server检索时丢失的某些图像的一部分
- IDA Pro使用学习研究笔记(一)——IDA View
- 【C/C++基础进阶系列】实战记录 -- 内存泄漏检测相关总结
- 结构光三维重建(二)线结构光三维重建
- 声纹识别数据:让疫情期间的“闻声识人”更安全
- Python基础之面向对象知识创建一个游戏角色
- Android Notification取消声音 取消弹出
- QQ-----无形的“扫描器”
- 学习笔记 - 大数据导论
- 什么是5G会话管理功能(SMF)
热门文章
- 正交试验设计例题及答案_2020年一级建造师《市政工程》模拟试题及答案(5)...
- nmd测试软件中文,阿迪达斯Boost传说中的踩屎感,NMD跑步真假对比测评!
- Mysql Update 流程摘抄
- 使用 show status 命令
- decode和case的用法
- Android Screen
- vml入门教程 【转】
- linux mint 安装java_Linux mint 安装步骤
- Python稳基修炼的经典案例5(计算机二级、初学者必须掌握的例题)
- Python用20行代码实现一个验证码的输入与验证(完整源码)