23 数据双向绑定修饰符lazynumbertrim
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了23 数据双向绑定修饰符lazynumbertrim相关的知识，希望对你有一定的参考价值。
弱小从来不是生存的障碍，傲慢才是。
一个人优秀到可怕的三个迹象：
高度的自律，近乎疯狂的努力；对自己好，学会不计代价的投资自己；相信自己，不在乎他人的眼光。
[基础]Vue表单的双向数据绑定2-修饰符
v-model 数据双向绑定修饰符
本文我们主要来看一下 v-model（数据双向绑定）中的修饰符。
lazy 修饰符
v-model 也有很多实用的修饰符，第一个修饰符 lazy，这个也叫做懒更新修饰符。
我们作一个 input 的绑定效果，现在 data 中声明一个 message 变量，值为空。然后在模板中写一个 <input /> 并和 message 进行双向数据绑定。
data()
return
checked: true,
name: '',
message:'',
,
模板中进行双向数据绑定：
<div>
message<input v-model="message" />
</div>
这时候当你在文本框中输入任何内容的时候，插值表达式会跟着改变。
如果你不想马上显示，就可以用 lazy 修饰符，这样就可以实现当输入完成后，失去焦点再进行改变。
<div>
message<input v-model.lazy="message" />
</div>
写完 lazy 修饰符后，可以看一下效果，这时候的效果就和我们想象的一样了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo22</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp(
data()
return
checked: true,
name: '',
message:'',
,
methods:
,
template:`
<div>
message<input v-model.lazy="message" />
</div>
`
)
const vm=app.mount("#app")
</script>
</html>
number 修饰符
<input />输入的内容无论是数字还是字母，最终都会变为字符串。
如果想最终输入的变成数字，你就可以使用 number 修饰符了。
比如我们现在去掉 lazy 修饰符，直接输入数字，这时候你修改插值表达式的结果，输出当前类型。
<div>
typeof message<input v-model="message" />
</div>
这时候你预览，就会发现最终 input 绑定的值会变成字符串类型。
这是html的底层逻辑造成的，这时候我们可以使用 number 修饰符，解决这个问题。
加上number修饰符后，你输入的值只要是数字，就变成了number类型。（也就是说，如果你输入的是字母，它还会是字符串类型）
<div>
typeof message<input v-model.number="message" />
</div>
trim 修饰符
trim 修饰符大家一定不陌生，它是用来消除 input 框输入内容前后的空格的。
现在我们在字符串上输入空格，其实它会在DOM元素上进行增加空格的，这个可以在控制台清楚的看出。
加入trim 修饰符后，Vue就会自动给我们去除前后的空格。
现在 data 中新声明一个变量，比如叫做 message1。
data()
return
//......
message1: 'willem'
,
用法如下:
<div>
message1<input v-model.trim="message1" />
</div>
这时候Vue就会自动为我们去除前后空格，但不会去除字符串中间的空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo22</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp(
data()
return
message1: 'willem'
,
methods:
,
template:`
<div>
message1<input v-model.trim="message1" />
</div>
`
)
const vm=app.mount("#app")
</script>
</html>
以上是关于23 数据双向绑定修饰符lazynumbertrim的主要内容，如果未能解决你的问题，请参考以下文章
vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别