preface

Today we'll learn about Vue JS basic command is the last module used. The next article focuses on the component area.
Don't say much, let's start directly

Introduction to form bidirectional binding

This issue mainly focuses on the input - > select tag. This issue focuses on the implementation method and code examples.
The instruction used today is the two-way binding command of v-model data. We have talked about the relevant usage before. If you are not clear, you can see my previous article.

This content does not involve methods or calculation properties. The following binding data are added in data.

form

text

Basic usage: bind a dynamic string data named nextMsg to the input text box.

                <input type="text" v-model="nextMsg" >
                <p>nextMsg: {{nextMsg}}</p>

textarea

Basic usage: bind a dynamic string data named nextLineMsg to textarea tag.

                <textarea v-model="nextLineMsg" cols="30" rows="10"></textarea>
                <p style="white-space: pre-line;">nextLineMsg: {{nextLineMsg}}</p>
                <br>

checkBox

The binding content of the multi selection box is slightly more, which is introduced in the form of code and text.

Bind a dynamic array data named: nextchvalue to the multi selection box.

                <!-- check box and Radio  
                    It is worth mentioning that check boxes support Booleans and arrays
                    
                -->
                <input id="checkbox" type="checkbox" v-model="nextCheckBoxValue" value="Joke">

                <input id="checkbox" type="checkbox" v-model="nextCheckBoxValue" value="Rookie">
                
                <input id="checkbox" type="checkbox" v-model="nextCheckBoxValue" value="theShy">

                <p> args: {{nextCheckBoxValue}}</p>

Bind a dynamic Boolean data named flag to the multi selection box

                <!-- Boolean types are supported -->
                <input type="checkbox" v-model="flag" >
                <p>flag: {{flag}}</p>

Multiple selection boxes can support the return of corresponding dynamic data values according to the click condition, using true value and false value

Bind a color dynamic string data to multiple selection boxes

    <!-- checkBox true-value false-value  attribute-->
    <input type="checkbox" v-model="color" true-value="gules" false-value="colourless" name="colors">
    <p>color: {{color}}</p>

radio

Bind a dynamic string named: sex to the radio box

	                <!-- radio Radio  -->
                <input type="radio" value="male" v-model="sex" name="sex" id="sex">
                <label for="sex">male</label>
                <input type="radio" value="female" v-model="sex" name="sex" id="sex2">
                <label for="sex2">female</label>
                <p>sex: {{sex}}</p>

Bind a dynamic string data named radioColor and red dynamic string data to the radio box, and the parameter value is red

                <!-- radio Bind dynamic data properties -->
                <input type="radio" v-model="radioColor" :value="red" name="color">
                <p>radioColor: {{radioColor}}</p>

It is similar to the (true/false)-value attribute of multiple check boxes, but this method is dynamic data binding through v-bind:value, and the final value is the value of radioColor = red.

Selection box

The value of select can be obtained by using two-way binding. The specific explanation methods are code and text.

Bind a dynamic string data named: selecColor to the selection box

                <select v-model="selectColor">
                    <option value="" disabled >Please select</option>
                    <option>gules</option>
                    <option>blue</option>
                </select>
                <p>selectColor: {{selectColor}}</p>

Why add one, please choose? If there is no initial basic option in select, it will be null by default. Therefore, we need to add an option whose value is null and cannot be selected.

Render a dynamic array object data named: colors to the selection box and render it through v-for

                <!-- v-for Render -->
                <select v-model="selected">
                    <option v-for="(item,index) of colors" v-bind:key="item.name">{{index}} {{item.name}}</option>
                </select>
                <p>selected: {{selected}}</p>

Modifier

Familiar modifiers are coming again. The three modifiers this time are relatively simple and are generally used for form data processing.

• Trim (clear spaces)
• Number (convert to number)
• Lazy (triggered after the change event)

Let's take a look at how to use the small demo to define three dynamic string data.

                <!-- lazy -->
                <div class="modifier_test">
                    <!-- chang After the event -->
                    <input v-model.lazy="lazyModifier">
                    <br>
                    <p>lazyModifier: {{lazyModifier}}</p>
                    <!-- number -->
                    <input v-model.number="numberModifier">
                    <br>
                    <p>numberModifier: {{numberModifier}}</p>
                    <!-- trim -->
                    <input v-model.trim="trimModifier">
                    <br>
                    <p>trimModifier: {{trimModifier}}</p>
                </div>

Concluding remarks

• All the contents of my works are purely original. If you reprint them, you need to indicate the source, otherwise you will be prosecuted!
• For the rest of Vue, check out my prologue
• Thank you for watching. Please give me some praise if you can help you. Thank you!
• If there are deficiencies, please point out in the comment area!