11表单输入绑定

# 表单输入绑定

# 修饰符

lazy 等失去焦点再获取值，而不是每次改变值都获取

<input type="text" v-model.lazy="msg">
{{msg}}

new Vue({
  el: "#app",
  data: {
    msg:""
  }
});

1
2
3
4
5
6
7
8
9

%accordion% 练习🚀 %accordion%

用到表单就多

<div id="app"> //添加lazy就可以一起发过去 意思是懒惰
    <input type="text" v-model.lazy="msg">
    {{msg}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: "",
        }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

%/accordion%

number 把输入的值转成数字

<input type="text" v-model.number="msg">
{{msg}}
{{typeof msg}}

new Vue({
  el: "#app",
  data: {
    msg:""
  }
});

1
2
3
4
5
6
7
8
9
10

%accordion% 练习🚀 %accordion%

<div id="app">
    <input type="text" v-model.number="msg">
    {{msg}} {{typeof msg}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: "",
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

%/accordion%

trim 去掉输入框前后的空格

<input type="text" v-model.trim="msg">
{{msg}}

new Vue({
  el: "#app",
  data: {
    msg:""
  }
});

1
2
3
4
5
6
7
8
9

%accordion% 去掉前后的空格符🚀 %accordion%

<div id="app">
    <button @click="handler">按钮</button>
    <input type="text" v-model.trim="msg">
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: ""
        },
        methods: {
            handler() {
                console.log(this.msg)
            }
        },
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编辑

上次更新: 2023/08/06, 00:38:41

← 10事件处理 12组件→