In this article, I’ll look at modifiers, which are a little bit more detailed and can save a lot of function wrapping code when used properly.

Three modifiers for v-model

1. v-model.number

// vue
<template>
  <div>
    <input type="text" v-model="num"> <span>Digital {{num}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       num: 0,}}}</script>

<style>

</style>
Copy the code

As you can see, this is a very basic and very common input field, and now it starts at 0, and the span next to it is going to be 0. So now let’s get rid of the 0 and make it any character or add a 1 after the 0, “01”, and we’ll see that both the span and the input become the input character or “01”. Our requirement is to limit the user’s input to numbers. There are many ways to do this, but most of them require functions. No more talking. Stickers. Stickers on your face.

// vue
<template>
  <div>
    <input type="text" v-model.number="num"> <span>Digital {{num}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       num: 0,}}}</script>

<style>

</style>
Copy the code

Well, we can restrict the input type to a number by putting a dot number after the v-model. In the first article in this series, we did a similar trick with the el-input-number component. The difference between that and this is that the type is determined by the input, whereas the el-input-number component is determined after the blur event, when the input is out of focus. That’s not to say that el-input-number is bad, but el-input-number is better for the last two decimal places. By the way, attach the addresses of the previous two chapters.About the potholes found when writing vue (part 1).About the pits found when writing vue (2)

2. v-mdel.trim

In the same input box, there is a user requirement that the user should remove the space before and after the query criteria when entering the input box. For example, in the product list, the user entered the name of the product, but unfortunately, the user was chatting with a good gay friend, who recommended a certain type of earphone to him, but did not send him the address. He also lazy to type, and then directly copied the name, in the list of goods to query. Also do not know what wechat changed, good guy, copy out of the name behind the front of the space, although the goods have been found out, but the input box inside the name did not edge, good guy, obsessive-compulsive disorder afflictive. So, as the front end, what do you do? Oh, stickers! Pooh, stick code!

// vue
<template>
  <div>
    <input type="text" v-model.trim="name"> <span>Commodity name {{name}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       name: ' ',}}}</script>

<style>

</style>
Copy the code

Trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim trim Only before and after space, the middle space is actually the content.

3. v-model.lazy

We found that vUE updates the data in real time every time we input it. You can use vue-devTools to see the data change in real time and update it as it changes. That’s the tool.

So if the team to a demand, want you to do like Baidu, input immediately send a request to obtain data that kind, but the server load capacity is limited, or the team hopes that the user finished in the request, and if the second input content and the first time is consistent, there is no request. In a user scenario, for example, if the user wants to buy a dress, such as a floral dress, the input box will only get the request after the floral dress is finished, and then the user enters a floral dress again, and the request does not occur. The request will only be sent after the content change is complete. So that’s where lazy comes in.

// vue
<template>
  <div>
    <input type="text" v-model.lazy="name"> <span>Commodity name {{name}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       name: ' ',}}}</script>

<style>

</style>
Copy the code

As shown in the code above,.lazy does not update the data immediately, it only updates after the change event. The first time the initial value of name is an empty string, so when you type in a floral skirt, the request is sent, and the second time when you type in a floral skirt, the request does not occur.

Above, is the V-model modifier, I hope it is useful to you!