form input binding

Vue provides a v-model directive for form elements.

two-way data binding

The elements bound by v-model all have the function of "two-way data binding".

Two-way data binding means that the page is rendered from the data in data, and when the data in data changes, the page will be automatically updated; when the page is operated, the data in data will also change accordingly.

Use of v-model

1. Input box

Bind the v-model attribute in the input box, and the content input by the user can be obtained in real time through the attribute value of v-model.

<input type="text" v-model="name">

       data() {
            return {
                name:'zhangsan'
            }
        },

2. checkbox

(1) Single check box

Bind the v-model attribute on a single check box, you can control whether the check box is selected or not selected by the value of v-model attribute value true or false.

<input type="checkbox" v-model="isChecked">

       data() {
            return {
                isChecked:true
            }
        },

(2) Multiple checkboxes

Bind the same v-model attribute to multiple check boxes, and control whether the check boxes are checked or unchecked by judging whether the check box's own value is in the v-model array. At the same time, checking and unchecking the operation check box will also synchronously update the value of the check box to add or delete in the array.

        <div>
            <input type="checkbox" value="eat" v-model="checkeds">吃饭
            <input type="checkbox" value="sleep" v-model="checkeds">睡觉
            <input type="checkbox" value="hit" v-model="checkeds">打豆豆
         </div>

    data() {
            return {
                checkeds:['sleep','eat']
            }
        },

3. Radio button

Bind the v-model attribute on the radio button, and control whether the radio button is selected or not selected by judging whether the value of the radio button is equal to the value of v-model.

        <div>
            <input type="radio" value="男" v-model="gender">男
            <input type="radio" value="女" v-model="gender">女
         </div>

    data() {
            return {
               gender:'女',
            }
        },

4. Dropdown list

Bind the v-model attribute on the select body, and determine the selected option by judging whether the value of the option is equal to the value of the v-model.

 <select name id v-model="from" class="form-control">
      <option value="en">英文</option>
      <option value="zh">中文</option>
      <option value="de">德语</option>
      <option value="ja">日语</option>
      <option value="ko">韩语</option>
    </select>

data() {
    return {
      from: "zh",
   };
  },

Vue Lecture 6