vue의 주요 수정자는 무엇입니까-프런트엔드 Q&A-php.cn

vue의 주요 수정자는 무엇입니까

青灯夜游

풀어 주다： 2022-01-04 11:33:38

원래의

4739명이 탐색했습니다.

vue의 키 수정자는 다음과 같습니다. 1. Enter 키를 캡처할 수 있는 ".enter" 2. Tab 키를 캡처할 수 있는 ".tab" 3. "delete"를 캡처할 수 있는 ".delete" 4. ".esc"는 취소 키를 캡처할 수 있습니다. 5. ".space"는 스페이스바를 캡처할 수 있습니다.

vue의 주요 수정자는 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

키보드 이벤트를 들을 때 일반적으로 사용되는 키에 해당하는 코드 값을 찾아야 하는 경우가 많습니다. Vue는 v-on에 키 수정자를 추가하여 키 이벤트를 모니터링할 수 있습니다

모든 키 수정자 별칭은 여기에 나열되어 있습니다:

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

로그인 후 복사

일반적인 로그인 기능 작업에서는 비밀번호를 입력한 후 Enter 키를 누르므로 로그인하지 않아도 됩니다. 마우스를 조작하고 로그인 버튼을 클릭할 필요가 없습니다. 그렇다면 이 기능은 vue에서 어떻게 구현됩니까?

이 경우를 설명하기 위해 간단한 데이터 추가 기능을 만들어 보겠습니다.

  <style>
        table{
            width:760px;
            /* margin: 0 auto; */
            border-collapse: collapse;
        }   
        table td{
            border: 1px solid black;
            width: .4rem;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <label for="">id</label>
        <input type="text" v-model="id">
        <label for="">name</label>
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add()">
 
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:&#39;#app&#39;,
            data:{
                list:[
                    {id:1,name:&#39;哈哈&#39;}
                ],
                id:&#39;&#39;,
                name:&#39;&#39;
            },
            methods: {
                add(){
                    // 向数组的最后一位添加新的对象
                    this.list.push({id:this.id,name:this.name})
                    // 完成添加后清空文本框
                    this.id=this.name=""
                }
            }
        })
    </script>
</body>

로그인 후 복사

이때 작동 방식은 다음과 같습니다. 버튼을 추가하면

vue의 주요 수정자는 무엇입니까

키업 키 리프트 이벤트가 기본 js에서 제공됩니다. 그런 다음 메서드 센터의 추가 메서드를 키업 리프트 이벤트에 바인딩하여 원하는 효과를 얻을 수 있는지 확인할 수 있습니다. 이름을 입력한 후 Enter 키를 누르면 키업 이벤트가 이름 텍스트 상자에 바인딩됩니다.

 <input type="text" v-model="name" @keyup="add()">

로그인 후 복사

vue의 주요 수정자는 무엇입니까

이름을 입력한 후 Enter 키를 누르지 않은 것을 볼 수 있습니다. 이때 자동으로 추가되어야 합니다. 키 수정자를 사용하세요

                                 <!-- enter:回车键 -->
<input type="text" v-model="name" @keyup.enter="add()">

로그인 후 복사

입력이 완료되고 텍스트 상자에 여전히 포커스가 있을 때 Enter를 누르면 추가 기능이 실행됩니다:

vue의 주요 수정자는 무엇입니까

Enter 외에도 Vue 공식 웹사이트도 다음 수정자를 제공합니다:

필요한 경우 이전 브라우저를 지원하기 위해 Vue는 가장 일반적으로 사용되는 키 코드에 대한 별칭을 제공합니다:

.enter.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

.tab

.delete("삭제" 및 "백스페이스" 키 캡처)

.esc

vue의 주요 수정자는 무엇입니까 .space

. up.down

.left

.right

따라서 제공되는 버튼 외에도 Vue, 다른 버튼도 사용할 수 있나요? f4를 예로 들어볼까요🎜

<input type="text" v-model="name" @keyup.f4="add()">

로그인 후 복사

🎜🎜🎜🎜 🎜2.5.0에 추가된 Vue입니다🎜 자동으로 키 수식어를 일치시키지만 일반적으로 기능키만 키 수식어로 사용합니다, 🎜🎜 🎜키를 사용하여 입력하지 마세요🎜🎜[관련 권장사항: "🎜vue.js tutorial🎜"]🎜

위 내용은 vue의 주요 수정자는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!