Vue.js之表单修饰符的使用

最新推荐文章于 2024-07-04 14:48:00 发布

cloudOnSkyline

最新推荐文章于 2024-07-04 14:48:00 发布

阅读量150

点赞数

分类专栏： JavaScript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125766876

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍Vue.js中表单修饰符的使用，主要介绍三种修饰符：

1.number:将表单的值转为数字类型

2.trim:将表单值左右两侧的空格去除

3.lazy:将表单的input事件改为change事件，当失去焦点或按下enter键时，绑定的数据会发生改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div><input type="number" placeholder="请输入内容" v-model.number="age"></div>
        <div><input type="text" placeholder="请输入文本" v-model.trim="info"></div>
        <div><input type="text" placeholder="请输入文本" v-model.lazy="msg"></div>
        <div v-text="msg"></div>
        <div><button @click="fun">点击</button></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                age: 20,
                info: '',
                msg: ''
            },
            methods: {
                fun() {
                    console.log(this.age + 20);
                    console.log(this.info.length);
                }
            }
        })
    </script>
</body>

</html>

效果如图：

cloudOnSkyline

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js之表单修饰符的使用

本文主要介绍Vue.js中表单修饰符的使用，主要介绍三种修饰符：1.number:将表单的值转为数字类型2.trim:将表单值左右两侧的空格去除3.lazy:将表单的input事件改为change事件，当失去焦点或按下enter键时，绑定的数据会发生改变效果如图：...
复制链接

扫一扫

专栏目录