Usage v-model property of the radio vue.js form, select, textarea of

As long as the form element, its value will not use value has been defined, but still can be used to set the default placeholder values.

section1--input：type="text"

type = "text" value do not define value on the label (since vue already dealt with), use the v-model = "currentValue"

data:{currentValue:"xxx"}

// input show results: xxx

section2--radio:

type = "radio" is not selected according to the checked selected, but a definition of the attribute data, and so the value of the property value equal to the value, will be selected. (Conversely, if selected, the v-model = value)

data:{currentValue:"red"}

point: two with the same radio v-model = "currentValue" indicates that the same group.

After // value = value of currentValue, rodio will be selected, the other radio will not be selected.

Using the v-bind:

<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

section3--textarea:

And type = text about the same

section4--checkbox:

point 1: a boolean through a preset value to control multiple choice, when we click, will VUE true false The inverted v-model corresponding to the set, we can not see the process.

eg: This is an attribute not set the value of the usage, in fact checkbox native applications also can set the value of

data: {checked: true} // checked here are boolean

<label for="checkbox">{{ checked }}</label>

point 2: the value of the click checked automatically vue negated.

more exercise: set the value of the value checkbox, when clicked, will bring value added to the array via v-model, value is not set is null.

Remember the above value must be set, otherwise it is null.

data: {toggle: true (may be any value)}

point3 - true-value checkbox in = "yes2" own property, when the user clicks, vm.toggle === yes2

<input
type="checkbox"
v-model="toggle"
true-value="yes2"
false-value="no2"
>
section5--select:

There are two types: one is a property of the class using common data string defined, namely:. V-model = " 'string'", 2 multiple choice to add a multiple attribute, v-model on the element = "[] "other related usage almost native.

eg:

data:{ selected:[] }

      <select v-model="selected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
      result:

ctrl + left click: All the option of text will be added to the selected array.

select primary use:

    <select>
    <option value ="volvo">Volvo</option>
    </select>
              ///////////////使用v-bind:///////////////////

</select>

则：vm.selected = {mname:'tcc'}

.mname = vm.selected "tcc"
---------------------
Author: tangchangcai.
Source: CSDN
Original: https: //blog.csdn.net/tangcc110 / article / details / 80181401
copyright: This article is a blogger original article, reproduced, please attach Bowen link!

Usage v-model property of the radio vue.js form, select, textarea of

Guess you like