Table of contents
(1) Example of key modifier for Enter key
(2) Examples of custom key modifiers
1. Key modifiers
The v-on command is used for event monitoring (such as click event, keyboard event, etc.)
Basic usage example of v-on listening to keyboard events:
<div id="root">
<input type="text" v-on:keyup="counter+=1">
<p>在输入框输入了{
{counter}}个字符</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
counter: 0
},
methods: {
}
})
</script>Results of the:
When listening to keyboard events, it is often necessary to examine detailed keystrokes. Vue.js allows adding key modifiers for v-on when listening to keyboard events. For example:
<!-- 只有在'key'是'enter'时调用'submit()'-->
<input v-on:keyup.enter="submit()">
<!-- 缩写语法 -->
<input @keyup.enter="submit">All official key modifier aliases are listed below:
.enter => //enter键
.tab => //tab键
.delete (捕获"删除"和"退格"按键) => //删除键
.esc => //取消键
.space => //空格键
.up => //上
.down => //下
.left => //左
.right => //右(1) Example of key modifier for Enter key
<div id="root">
<input type="text" v-model="content" v-on:keyup.enter="fun(content)">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content: ''
},
methods: {
fun:function(data){
alert('录入内容为：'+data);
this.content='';
}
}
})
</script>Results of the:
Enter "Xia Zhi 121" in the input box and press the Enter key. After releasing the Enter key, a dialog box will pop up in the browser saying "Enter the content: Xia Zhi 121".
(2) Examples of custom key modifiers
Vue.js also supports custom key modifiers, which can be realized by using the key code corresponding to the key. You can change the above function to pop up the input content after releasing F2, and the key code corresponding to F2 is 113, so you can use it for a long time The code entry is modified as follows:
<div id="root">
<input type="text" v-model="content" v-on:keyup.113="fun(content)">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content: ''
},
methods: {
fun:function(data){
alert('录入内容为：'+data);
this.content='';
}
}
})
</script>Results of the:
Enter "Hello" in the input box and press F2. After releasing F2, the browser will pop up "The input content is: Hello".
Two, v-model modifier
v-model can realize two-way binding between form elements and data. Similar to event modifiers, the v-model directive also has modifiers to control the mechanism of data synchronization.
（1）.lazy
By default, v-model synchronizes the content in the input box in the input event, that is, once the data changes, the data in the corresponding data will automatically change. If the lazy modifier is used, the data can be updated when the focus is lost or the carriage return is entered .
Example of using the lazy modifier of v-model:
<div id="root">
<input v-model.lazy="content">
<div>{
{content}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content:"这是content"
},
methods: {
}
})
</script>Results of the:
（2）.number
By default , the content entered in the input box will be treated as a string type, which is caused by the underlying logic of HTML . If you add a number modifier, you can convert the input content when entering a number Convert to number type.
Example of using the number modifier of v-model:
<div id="root"><br><br>
<input v-model="content1">
<div>【不加number修饰符】输入内容：{
{content1}}</div>
<div>【不加number修饰符】数据类型：{
{typeof content1}}</div>
<input v-model.number="content2">
<div>【不加number修饰符】输入内容：{
{content2}}</div>
<div>【不加number修饰符】数据类型：{
{typeof content2}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content1:"这是content1",
content2:"这是content2"
},
methods: {
}
})
</script>Results of the:
Enter "121" in the first input box and the second input box respectively, and the content generated in the browser is as follows:
（3）.trim
The trim modifier can remove the spaces on the left and right sides of the input content.
Example of trim modifier usage of v-model:
<div id="root">
<input v-model.trim="content">
<div>输入内容：{
{content}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
content:"content"
},
methods: {
}
})
</script>Results of the:
