vue修饰符 .lazy .number .trim

2024-09-04 09:02:57

.lazy

在输入框中，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

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 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.length }}</p>

    </div>

</template>

<script>

    export default {

        data(){

            return{

              val:''

            }

        }

    }

</script>

　　

最新文章

热门文章