Vue.js表单修饰符

作者: 爱学习的代代 | 来源:发表于2020-05-28 09:38 被阅读0次

Vue这些修饰符帮我节省20%的开发时间
【转】vue修饰符
vue 常见修饰符
Vue.js表单修饰符
目录
向Vue进军（二）
vue2.0之v-model
vue 修饰符
vue 修饰符详情总结
Vue.js 事件修饰符

1、 .lazy 修饰符。默认情况下，v-model在input事件中同步输入框的值与数据，通过添加修饰符后 v-model.lazy 转变为在change事件中同步

2、.number 修饰符，可以将用户输入的值，转换成Number类型。

3、 .trim 可以自动过滤用户输入的首尾空格。

1、使用。.lazy修饰符添加后，在input输入框内输入数字的时候，绑定的数据不会发生变化，只有当点击页面其他元素使输入框失焦点的时候会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单的修饰符</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input v-model.lazy="name">
        <p>{{ name }}</p>
    </div>




    <script>
        new Vue({
            el: '#app',
            data: {
                name: "请输入姓名："
            }
        })
    </script>
    
</body>
</html>

2、使用 .number修饰符可以将输入框内的字符串转换成数字

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单的修饰符</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input v-model.lazy="name">
        <p>{{ name }}</p>

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

      
    </div>




    <script>
        new Vue({
            el: '#app',
            data: {
                name: "请输入姓名：",
                number: "请输入你要转换的数字",
            },
            methods: {
                showMsg: function() {
                    console.log(this.number);
                    console.log(typeof(this.number))
                }
            }
        })
    </script>
    
</body>
</html>

3、使用.trim修饰符，可以将输入框内的前后的空格去掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单的修饰符</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- .lazy修饰符 -->
        <input v-model.lazy="name">
        <p>{{ name }}</p>

        <!-- .number修饰符 -->
        <input v-model="number">
        <p v-on:click="showMsg">{{ number }}</p>

        <!-- trim修饰符 -->
        <input v-model.trim="search_text">
        <p v-on:click="showContent"> {{ search_text }}</p>
    </div>




    <script>
        new Vue({
            el: '#app',
            data: {
                name: "请输入姓名：",
                number: "请输入你要转换的数字",
                search_text: "要搜索的文本"
            },
            methods: {
                showMsg: function() {
                    console.log(this.number);
                    console.log(typeof(this.number))
                },
                showContent: function() {
                    console.log( "a" + this.search_text)
                }
            }
        })
    </script>
    
</body>
</html>

疑问：不加.trim， input控件一样会自动去掉空格的。