v-model修饰符 .lazy .number .trim

1、v-model.lazy=“xxx”

默认情况下，v-model它是在每次输入数据时触发input事件来更新数据的

使用 .lazy 修饰符后，当改变数据失去焦点-触发change事件来进行更新数据

2、v-model.number="xxx"

它会自动将输入的值自动转成number 类型（可以通过parseFloat转成数值，则会自动转，转不成功的返回原始：asdf123）

会自动开启 type=number 类型

如果输入的值是数字开头，会舍弃非数字后面的值

比如: 123aaaa123,转成的值为123

3、v-model.trim 去除左右空格

代码例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model修饰符 .lazy .number .trim</title>
</head>
<body><!--1、v-model.lazy=“xxx”默认情况下，v-model它是在每次输入数据时触发input事件来更新数据的使用 .lazy 修饰符后，当改变数据失去焦点-触发change事件来进行更新数据2、v-model.number="xxx" 它会自动将输入的值自动转成number 类型（可以通过parseFloat转成数值，则会自动转，转不成功的返回原始：asdf123）会自动开启 type=number 类型如果输入的值是数字开头，会舍弃非数字后面的值比如: 123aaaa123,转成的值为123  3、v-model.trim 去除左右空格--><div id="app"><h3>v-model.lazy触发change事件来更新</h3><input v-model.lazy="msg" @input="doInput" @change="doChange"><span>{{msg}}</span><h3>v-model.number转成number类型</h3><input v-model.number="msg"><input v-model="msg" type="number"><span>输入的值的类型为{{typeof msg}}</span><h3>v-model.trim 去除左右空格</h3><input v-model.trim="msg"><span>{{msg}}值的长度{{msg.length}}</span></div><script src="./node_modules/vue/dist/vue.global.js"></script><script type="text/javascript">const {createApp} = Vue;const app = createApp({data(){return {msg:''}},methods:{doInput(event){console.log("doInput",event)},doChange(event){console.log("doChange",event)}}}).mount("#app");console.log("app:",app);</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/113077.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！