温馨提示×

vue表单修饰符有哪些

养鱼的猫咪
935
2021-03-30 14:31:57
栏目: 编程语言

vue中的表单修饰符有:1.lazy,将输入框的值与数据转变在change事件中同步;2.number,将输入框内的字符串转换成数字;3.trim,将输入框内中前后的空格去掉;

vue表单修饰符有哪些

vue中的表单修饰符有以下几种

1.lazy修饰符

vue中lazy修饰符的作用是将输入框的值与数据转变在change事件中同步。

<input v-model.lazy="name">

<p>{{ name }}</p>

<script>

    new Vue({

        el: '#app',

          data: {

             name: "请输入姓名:"

         }

    })

</script>

2.number修饰符

vue中number修饰符的作用是将输入框内的字符串转换成数字。

<input v-model.number="number">

<p v-on:click="showMsg">{{ number }}</p>

<script>

    methods: {

        showMsg: function() {

             console.log(this.number);

             console.log(typeof(this.number))

         }

      }

</script>

3.trim修饰符

vue中trim修饰符的作用是将输入框内中前后的空格去掉。

<input v-model.trim="search_text">

<p v-on:click="showContent"> {{ search_text }}</p>

<script>

    showContent: function() {

        console.log( "a" + this.search_text)

    }

</script>


0