本文已参与「新人创作礼」活动，一起开启掘金创作之路
修饰符的使用
本文主要介绍按键修饰符的使用，可为元素绑定指定按键的键盘按下及弹起事件等。通过两个小案例来进行简单介绍
1.指定的按键修饰符
案例一：用户输入用户名后，按下回车键，内容会显示在下方区域。按下backspace键，用户名会被清空
核心代码：
<div><span>用户名: </span><input type="text" v-model='uname' @keyup.enter='inputName()' @keyup.delete='deleteName()'></div>
</div>
2.自定义按键修饰符
案例二：在第二个输入框中，当用户输入a或A时,会弹出提示内容
（1）可直接利用ASCII码值进行绑定
（2）自定义按键修饰符（如下所示），再进行调用
Vue.config.keyCodes.a = 65;
全部代码如下：
<!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">
<!-- delete对应键盘上的backspace键 -->
<div><span>用户名: </span><input type="text" v-model='uname' @keyup.enter='inputName()' @keyup.delete='deleteName()'></div>
</div>
<div><span>输入的名字是：</span><span class="nameArea"></span> </div>
<div class="app1">
<div>
<input type="text" @keyup.a="alert('输入了a')" v-model="app1Data">
</div>
</div>
<script src="./vue.min.js"></script>
<script>
var input = document.querySelector('input');
var nameArea = document.querySelector('.nameArea')
// 不能随便自定义按键修饰符,只能取a,A,或者连续的a（以a按键为例）。实际上可以直接使用ASCII值进行绑定
Vue.config.keyCodes.a = 65;
var vm1 = new Vue({
el: '#app',
data: {
uname: ''
},
methods: {
inputName() {
nameArea.innerHTML = this.uname;
},
deleteName() {
this.uname = '';
}
}
})
var vm2 = new Vue({
el: '.app1',
data: {
app1Data: '2'
},
methods: {}
})
</script>
</body>
</html>
表单修饰符的使用
本文主要介绍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>
