修饰符.lazy .number .trim

1、lazy
v-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新

<template><div><p>.lazy修饰符</p><input type="text" v-model.lazy="val"><p>{{ val }}</p></div>
</template>
<script>export default {data(){return{val:''}}}
</script>

2、number
.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>

3、trim
.trim 修饰符会自动过滤掉输入的首尾空格

<template><div><p>.trim修饰符</p><input type="text" v-model.trim="val"><p>val的长度是：{{ val.length }}</p></div>
</template><script>export default {data(){return{val:''}}}
</script>

 <div id="app"><input type="text" v-model.trim="name" name="" id="" value="" /><span>{{ name }}</span></div>var app = new Vue({el: '#app',data: {name:''}})

修饰符.lazy .number .trim相关推荐

vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点或者按下回车键时才更新 <template>< ...
037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue——v-model的三种修饰符lazy、number、trim
Vue--v-model的三种修饰符lazy.number.trim v-model.lazy:值修改操作完成之后才会发生变化. v-model.number:值修改时,保持其值为Number类型. ...
表单域修饰符numebr、trim、lazy
表单域修饰符 number:转化为数值 trim:去掉开始和结尾的空格 lazy:将input事件切换为change事件 1.number:转化为数值 <input type="tex ...
vue的lazy修饰符和number修饰符、表单结构
目录 vue的lazy修饰符 vue的number修饰符表单的构成表单域表单控件 vue的lazy修饰符在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ...
[vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令
Vue常用特性常用特性概览 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
vue --- 修饰符.lazy、.number、.trim
.lazy: 会在转变为change事件中同步 <div id="app"><input type="text" v-model.lazy=& ...
表单下拉框、表单修饰符（.lazy、.number、.trim）
表单下拉框知识点 v-model select 表单下拉框绑定 <div id="myApp"><h3>你最喜欢的NBA球星是:</h3>&l ...

修饰符.lazy .number .trim

修饰符.lazy .number .trim相关推荐

最新文章

热门文章