vue表单修饰符有哪些 vue常用指令修饰符

文章摘要：vue表单修饰符有哪些 vue常用指令修饰符

vue中的表单修饰符有：1.lazy，将输入框的值与数据转变在change事件中同步；2.number，将输入 […]

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

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>