Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces "how to use vue v-model" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use vue v-model" can help you solve your doubts.

Basic use of v-model

Form submission is a very common feature in development and an important means of interacting with users:

For example, users need to submit account passwords when logging in and registering.

For example, when users retrieve, create and update information, they need to submit some data.

All of these require that we can get the data submitted by the user in the code logic, which we usually use the v-model instruction to do:

The v-model directive can create bidirectional data bindings on form input, textarea, and select elements

It automatically selects the correct method to update the element based on the control type

Although somewhat magical, v-model is essentially nothing more than syntactic candy, it is responsible for listening to user input events to update data, and in some extreme scenario

To do some special treatment.

The principle of v-model

Officials have said that the principle of v-model actually has two operations behind it:

V-bind binds the value of the value attribute

The v-on binding input event listens to the function, which gets the latest value assigned to the bound property.

V-model binds textarea

Let's bind other form types: textarea, checkbox, radio, select

Let's take a look at binding textarea:

V-model binds checkbox

Let's take a look at v-model binding checkbox: a single checkbox and multiple checkboxes

Single check box:

V-model is the Boolean value.

At this point, the value of input does not affect the value of v-model.

Multiple check boxes:

When there are multiple check boxes, because more than one can be selected, the corresponding data attribute is an array.

When one is selected, the value of input is added to the array.

V-model binds radio

V-model binds radio to select one of the items

V-model binds select

Like checkbox, select is divided into two cases: single selection and multiple selection.

Select: only one value can be selected

V-model binds to a value

When we select one of the option, we assign its corresponding value to the fruit

Multiple selections: you can select multiple values

V-model binds an array

When multiple values are selected, the value corresponding to the selected option is added to the array fruit

Value binding of v-model

At present, most of the values in our previous case are fixed in template:

For example, the two input boxes of gender are male and female.

For example, the three input boxes of hobbies are basketball, football, and tennis.

In real development, our data may come from the server, so we can first request the value, bind it to the object returned by data, and then bind the value through v-bind, which is called value binding.

The specific approach is not given here, because it is still the process of using v-bind.

V-model modifier-lazy

What is the purpose of the lazy modifier?

By default, when v-model binds two-way binding, it binds the input event, so it synchronizes the latest value with the bound property after each content input.

If we follow the lazy modifier after the v-model, we will switch the bound event to the change event, only on submission (such as enter)

To trigger.

V-model modifier-number

Let's first take a look at the type of value bound by v-model:

Message is always a string type, even when we set type to number, it is a string type

If we want to convert to a numeric type, we can use the .number modifier:

In addition, when we make a logical judgment, if it is a string type, it will be implicitly converted if it can be converted:

The following score will be implicitly converted in the process of judgment

V-model modifier-trim

If you want to automatically filter guard whitespace characters entered by the user, you can add a trim modifier to v-model

Attached: parameters bound by parent and child components v-model to communicate

Actually, v-model is just grammatical candy.

Parent component

{{inputValue}} import testModel from 'src/components/testModel' export default {data () {return {inputValue: "inputValue"}}, components: {testModel,}}

Sub-component

Export default {data () {return {}}, props: ["value"], model: {prop: 'value', / / this event name can be written at will. It actually specifies the method event:' ababab'}} that the child component needs to register to update the parent component value.

Principle:

1. Show: the parent component v-model and the child component receives a props value value and displays it on the child component's own input.

two。 Change: when the child component itself changes, trigger its own input method, and then trigger the event method of the parent component, change the value of the parent component, and then change the received props to achieve the change of self-presentation.

Model is used in the example, and the official website says so, in fact, for the case of radio box, check box button, etc., their value is not value, but checked. In this case, you need to write this.

Model: {prop: 'checked', event:' change'}, reading here, this article "how to use vue v-model" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.