526互联

vue之input输入框的几个事件

发布时间 2023-04-06 16:52:14作者: 树苗叶子

目录

事件简介

click     点击事件，一般不会用于input输入框，会用于按钮，用于输入框就有点像focus了，当点击输入框时会触发
blur      失去焦点事件，当失去焦点时会触发。
focus     获取焦点事件，当获得焦点时会触发。
input     在输入框中每输入一个字符都会触发一次
change    当输入框内容改变了，且失去焦点的时候会触发（注意，内容没改变是不会触发的！）

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jQuery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>点击时就会触发，一般用于点击按钮</p>
    <input type="text" @click="clickBtn">

    <p>失去焦点时就会触发</p>
    <input type="text" @blur="blurFunc">

    <p>获取焦点时就会触发</p>
    <input type="text" @focus="focusFunc">

    <p>每输入一个字符都会触发</p>
    <input type="text" @input="inputFunc">

    <p>当输入框内容改变了，且失去焦点的时候会触发（注意，内容没改变是不会触发的！）</p>
    <input type="text" @change="changeFunc">
</div>
</body>
<script>
    vm = new Vue({
        el: '#app',
        data: {
            d1: {name: 'zzz', age: 10}
        },
        methods: {
            clickBtn(){
                console.log('click事件')
            },
            blurFunc(){
                console.log('blur事件')
            },
            focusFunc(){
                console.log('focus事件')
            },
            inputFunc(){
                console.log('input事件')
            },
            changeFunc(){
                console.log('change事件')
            },
        }
    })
</script>
</html>