vue修饰符 之 .lazy .number .trim
**在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 ,也就是在失去焦点 或者 按下回车键时才更新**<template><div><p>.lazy修饰符</p><input type="text" v-
·
**在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 ,
也就是在失去焦点 或者 按下回车键时才更新**
<template>
<div>
<p>.lazy修饰符</p>
<input type="text" v-model.lazy="val">
<p>{{ val }}</p>
</div>
</template>
<script>
export default {
data(){
return{
val:''
}
}
}
</script>
**.number 修饰符可以将 输入的值转化为Number类型 ,否则虽然你输入的是数字
但它的类型其实是String,在数字输入框中比较有用**
<template>
<div>
<p>.number修饰符</p>
<input type="number" v-model.number="val">
<p>我的数据类型是:{{ typeof(val) }}</p>
</div>
</template>
<script>
export default {
data(){
return{
val:''
}
}
}
</script>
.trim 修饰符会自动过滤掉输入的首尾空格
<template>
<div>
<p>.trim修饰符</p>
<input type="etxt" v-model.trim="val">
<p>val的长度是:{{ val.length }}</p>
</div>
</template>
<script>
export default {
data(){
return{
val:''
}
}
}
</script>
更多推荐
已为社区贡献20条内容
所有评论(0)