vue事件处理和数据的双向绑定v-model

淘淘桃

已于 2023-06-23 17:07:40 修改

阅读量721

点赞数

分类专栏： vue 前端文章标签： vue.js 前端

于 2023-06-20 22:14:19 首次发布

本文链接：https://blog.csdn.net/xiaolisolovely/article/details/131316625

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

1.事件处理

# 事件指令
   -click:点击事件

# input标签的事件
   -input：只要输入内容，就会触发
-change：只要输入框发生变化，就会触发 -------多选单选checkbox，用change

-blur：只要失去焦点，就会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>input事件</h1>
    <input type="text" @input="handleInput" v-model="username"> --->{{username}}
    <h1>change事件</h1>
    <input type="text" @change="handleChange" v-model="username1"> --->{{username1}}
    <h1>blur事件</h1>
    <input type="text" @blur="handleBlur" v-model="username2"> --->{{username2}}

</div>
</body>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            username: 'lqz',
            username1: '',
            username2: '',
        },

        methods: {
            handleInput() {
                console.log(this.username)

            },
            handleChange() {
                console.log('我执行了')
            },
            handleBlur(){
                console.log('失去焦点了')
            }
        }
    })


</script>
</html>

2.数据的双向绑定

# 数据双向绑定---》只有input标签---》v-model 做双向数据绑定
# 咱们之前写的，其实都是数据的单向绑定
修改js的值，页面变了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>单向数据绑定，咱们不用</h1>
    <!--    <p>用户名<input type="text" :value="username"></p>-->
    <!--    <p>密码<input type="password" :value="password"></p>-->
    <!--    <p>-->
    <!--        <button @click="handleSubmit">登录</button>-->
    <!--    </p>-->

    <h1>双向数据绑定</h1>
    <p>用户名<input type="text" v-model="username"></p>
    <p>密码<input type="password" v-model="password"></p>
    <p>
        <button @click="handleSubmit">登录</button>
    </p>


</div>
</body>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            username: 'lqz',
            password: '123'
        },
        methods: {
            handleSubmit() {
                console.log(this.username)
                console.log(this.password)
            }
        }
    })


</script>
</html>

v-model进阶

v-model 之 lazy、number、trim
   # lazy：等待input框的数据绑定时区焦点之后再变化
   # number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
   # trim：去除首位的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>lazy修饰符</h1>
    <input type="text" v-model.lazy="username">---->{{username}}
    <h1>number修饰符</h1>
    <input type="text" v-model.number="username1">---->{{username1}}
    <h1>trim修饰符</h1>
    <input type="text" v-model.trim="username2">---->{{username2}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            username1: '',
            username2: '',
        },
    })
</script>
</html>

淘淘桃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue事件处理和数据的双向绑定v-model

数据双向绑定---》只有input标签---》v-model 做双向数据绑定。-change：只要输入框发生变化，就会触发。-input：只要输入内容，就会触发。-blur：只要失去焦点，就会触发。# 咱们之前写的，其实都是数据的单向绑定。-click:点击事件。修改js的值，页面变了。# input标签的事件。
复制链接

扫一扫