Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is v-model". In daily operation, I believe many people have doubts about what is v-model. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is v-model?" Next, please follow the editor to study!

What is v-model?

As mentioned just now, ``v-model` is an instruction that we can use in template code. The directive is a template token that tells Vue what we want to do with DOM.

In the case of v-model, it tells Vue that we want to create a two-way data binding between the value in template and the value in the data attribute.

A common use case for using v-model is when designing elements related to a form. We can use it to enable the input element to modify the data in the Vue instance.

Value: {{value}}

Export default {data () {return {value: 'Hello World'}

When we type in the input, we will see that our data properties are changing

What is the difference between v-model and v-bind?

The v-bind instruction usually switches with v-model. The difference between the two is that v-model provides two-way data binding.

In our case, this means that if our data changes, so does our input, and if our input changes, so does our data.

V-bind binds data in only one way.

This is very useful when we want to create a clear one-way data flow in our application. However, you must be careful when choosing between v-model and v-bind.

Modifiers for v-model

Vue provides two modifiers that allow us to change the functionality of v-model. Each can be added up like this, or even connected.

.lazy

By default, v-model synchronizes with the state (data properties) of the Vue instance on each input event. This includes gaining / losing focus, etc.

The .modify modifier modifies our v-model, so it synchronizes only after the change event. This reduces the number of v-model attempts to synchronize with Vue instances and, in some cases, improves performance.

.number

Typically, input automatically changes the entered value to a string, even if you enter a numeric type. One way to ensure that our values are treated as numbers is to use the .number modifier.

According to the Vue document, if the input changes and parseFloat () cannot parse the new value, the last valid value entered will be returned.

.trim

Like the trim method in most programming languages, the .trim modifier removes the beginning or end of white space before returning a value.

Using v-model in custom components

In Vue, there are two main steps in data binding:

Transfer data from the parent node

Issue events from the child instance to update the parent instance

Using v-model on a custom component allows us to pass a prop with an instruction to handle an event.

What on earth does that mean?

The default name for values passed using v-model is modelValue. However, we can also pass a custom name like this.

Note: when we use a custom model name, the name of the emitted method will be update:name.

Using v-model in custom components

To use v-mode in a custom component, you need to do two things:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Receive the value of v-model in props.

When the corresponding value changes, an update event is issued

Ok, first of all, let's make a statement:

Export default {props: {modelValue: String,}}

Next, bind the modelValue to the desired element, and when the value changes, we emit the new value through update:modelValue.

In this way, two-way binding can be implemented.

The skills of using v-model

If you use v-model in custom components, let's take a look at some of the more advanced uses of the v-model directive.

Use v-model multiple times for a component

V-model is not limited to one per component. To use v-model multiple times, we just need to make sure that it is uniquely named and accessed correctly in the subcomponent.

Add a second v-model to the following component, which is first named lastName:

Value: {{value}}

Last Name: {{lastName}}

Import CustomTextInput from'. / CustomTextInput.vue' export default {components: {CustomTextInput,}, data () {return {value: 'Matt', lastName:' Maribojoc'}

Then, our internal subcomponents:

First Name Last Name export default {props: {lastName: String, modelValue: String,}}

After running, you can see that both v-model are working properly:

Customize the modifiers for v-model

There are some modifiers built into Vue, but these are far from enough, so sometimes we need to customize our own modifiers.

Suppose we want to create a modifier to remove all spaces in the entered text. We call it no-whitespace:

Within the component, we can use props to capture modifiers. The name of the custom modifier is nameModifiers

Props: {lastName: String, modelValue: String, modelModifiers: {default: () = > ({})}}

The first thing we need to do is change the @ input processor to use a custom method. We can call it emitValue, which accepts the name of the property and event object being edited.

First Name

In the emitValue method, we check the modifier before calling $emit. If the no-whitespace modifier is true, you can modify the value before sending it to the parent.

EmitValue (propName, evt) {let val = evt.target.value if (this.modelModifiers ['no-whitespace']) {val = val.replace (/\ sWeig,'')} this.$emit (`update:$ {propName} `, val)}

Run, perfect:

At this point, the study of "what is v-model" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.