Vue 教程(十四)v-model 修饰符
Posted _否极泰来_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(十四)v-model 修饰符相关的知识，希望对你有一定的参考价值。
Vue 教程(十四)v-model 修饰符
v-model 修饰符
- v-model.lazy：默认情况下, v-model 獸默认是在 input 事件中同步输入框的数据的。
也就是说,一旦有数据发生改变对应的 data 中的数据就会自动发生改变。 - v-model.number：默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
number 修饰符可以让在输入框中输入的内容自动转成数字类型。 - v-model.trim：如果输入的内容首尾有很多空格,通常我们希望将其去除
trim 修饰符可以过滤内容左右两边的空格
随堂笔记
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8" />
<title>v-model修饰符</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h3>v-model修饰符</h3>
<div id="app">
<label for="message">请输入消息：</label>
<input id="message" type="text" v-model.lazy="message" /> v-model.lazy
<p>当前内容：{{message}}</p>
<label for="age">您的年龄：</label>
<input id="age" type="number" v-model.number="age" /> v-model.number
<p>当前数据和类型：{{age}} - {{typeof age}}</p>
<label for="name">请输入姓名：</label>
<input id="name" type="text" v-model.trim="name" /> v-model.trim
<p>输入性名：{{name}}，姓名的长度：{{name.length}}</p>
</div>
<script>
const vue = new Vue({
el: "#app",
data: {
message: "",
age: 10,
name: "",
},
});
</script>
</body>
</html>
</html>
– 以上为《Vue 教程(十四)v-model 修饰符》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。
——厚积薄发(yuanxw)
以上是关于Vue 教程(十四)v-model 修饰符的主要内容，如果未能解决你的问题，请参考以下文章