home PYTHONJAVA
 

Vue.js form

This section introduces you to the application on the Vue.js form.

You can create a two-way data binding on a form control element with the v-model directive.

v-model automatically picks the correct method to update elements based on the type of control.

Input box

v-model demonstrates bidirectional data binding using v-model in the input and textarea elements based on the control type

instance:

automatically picks the correct method to update the element.

<div id=" app"> <p>input element:</p > <input v-model="message" Placeholder="Edit me......"> <p>The message is: {{ message }}</ p> <p>textarea Element:</p > <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" Placeholder="Multi-line text input ..."></ textarea> </div> <script> New vue({ El: '#app', Data: { Message: 'welookups.com ', Message2: 'Programming tutorial\r\nhttp://www.welookups.com .com' } }) </script>

checkbox

If the checkbox is a logical value, if it is more than one, bind to the same array:

checkbox

Two-way data binding for checkboxes is demonstrated in the following example:

<div id=" app"> <p>A single checkbox:</p> <input type="checkbox" id="checkbox" v-model="checked" > <label for="checkbox"> {{ checked }}</label> <p>Multiple checkboxes:</p> <input type="checkbox" id="welookups.com " value="welookups.com " v-model="checkedNames"> <label for="welookups.com ">welookups.com </label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="welookups" value="welookups" v-model="checkedNames"> <label for="welookups">welookups</label> <br> <span>The value chosen is: {{ checkedNames }}</span>

radio button

The two-way data binding of the radio button is demonstrated in the following example:

radio button

<div id="app"> <input type="radio" id="welookups.com " value="welookups.com " v-model="picked"> <label for="welookups.com ">welookups.com </label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>Checked in: {{ used }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'welookups.com ' } }) </script>

select list

select

<div id="app"> <select v-model="selected" name="fruit"> <option value="">Choose a website</option> <option value="www.welookups.com .com">welookups.com </option> <option value="www.google.com">Google</option> </select> <div id="output"> The selected website is: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>

Select welookups.com and the output looks like this:


modifier

.lazy

By default, v-model synchronizes the value and data of the input box in the input event, but you can add a modifier lazy to turn it into a synchronization event:

<!-- Update in "change" instead of "input" event -->
<input v-model.lazy="msg"  >

.number

If you want to automatically convert the user's input value to a Number type (if the original value is NaN, return the original value), you can add a modifier number to v-model to process the input value:

<input v- Model.number="age" type="number">

This is often useful because the value entered in the HTML always returns a string type when type="number".

.trim

If you want to automatically filter the leading and trailing spaces entered by the user, you can add the trim modifier to the v-model to filter the input:

<input v- Model.trim="msg">

Select welookups.com and the output looks like this:


modifier

.lazy

By default, v-model synchronizes the value and data of the input box in the input event, but you can add a modifier lazy to turn it into a synchronization event:

<!-- Update in "change" instead of "input" event -->
<input v-model.lazy="msg"  >

.number

If you want to automatically convert the user's input value to a Number type (if the original value is NaN, return the original value), you can add a modifier number to v-model to process the input value:

<input v- Model.number="age" type="number">

This is often useful because the value entered in the HTML always returns a string type when type="number".

.trim

If you want to automatically filter the leading and trailing spaces entered by the user, you can add the trim modifier to the v-model to filter the input:

<input v- Model.trim="msg">





welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.