Vue中v-model指令的常用修饰符
2024-09-28 07:39:27
v-model指令有三个可以选用的修饰符:.lazy、.number以及.trim。vue官方对此的描述为:
- .number-输入字符串转为有效的数字
- .lazy-取代input监听change事件
- .trim-输入首尾空格过滤
官方链接:https://cn.vuejs.org/v2/api/#v-model
这三个修饰符的使用实例:(可尝试复制运行但需要正确的vue路径)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<!-- lazy修饰符 点击回车或者失去焦点时才发生数据响应 -->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!-- number修饰符 将输入的内容直接作为number类型使用-->
<input type="number" v-model.number="age">
<h2>{{age}} {{typeof age}}</h2>
<!-- trim修饰符 去除左右两边的空格 -->
<input type="text" v-model.trim="trim">
<h2>{{trim}}</h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el:'#div1',
data:{
message:'修饰符',
age:20,
trim:''
},
methods:{ }
})
</script>
</body>
</html>
最新文章
- oracle10g配置小记
- ziparchiver添加后编译出错
- fastJson java后台转换json格式数据
- cdoj 04 Complete Building the Houses 暴力
- poj 3620 Avoid The Lakes(广搜,简单)
- Android开发之EventBus的简单使用
- Java学习笔记(3)
- Tsinsen A1517. 动态树 树链剖分,线段树,子树操作
- File上传
- Bzoj 1579: [Usaco2009 Feb]Revamping Trails 道路升级 dijkstra,堆,分层图
- WordPress插件制作教程(五): 创建新的数据表
- OpenStack high-level Functionsenabled
- ajax交互数据简单拼装,数组成字符串
- 9.Git分支-分支的创建与合并-02
- python网络编程-udp
- Node.js读取文件内容并返回值(非异步)
- HTML第一耍 标题 段落 字体等标签
- Idea checkstyle插件的使用
- Java的内存管理机制之内存区域划分
- Yarn &;&; npm设置镜像源
热门文章
- 整理 Linux下列出目录内容的命令
- 使用Red5-Pro Android官方Demo拆解分析(一)
- Mock分页
- 使用SQL语句进行特定值排序
- @RequestMapping中的produces的作用和使用方式
- 剑指offo记录
- 没想到 Hash 冲突还能这么玩,你的服务中招了吗?
- 解决node 运行接口 出现 Cannot destructure property `us` of &#39;undefined&#39; or &#39;null&#39;.
- Java容器学习之ArrayList
- FPAG_Microblaze_PWM_定时器