vue.js中的表单radio,select,textarea的v-model属性的用法

只要是表单元素，其值已经不会再用value来定义了，但是placeholder还是可以用来设置默认值。

section1--input：type="text"

type="text"不要在标签上定义value值（因为vue已经处理了），要用v-model="currentValue"

data:{currentValue:"xxx"}

<input type="text" v-model="currentValue"/>

// input显示结果: xxx

section2--radio:

type="radio"的选中状态不是根据checked来选中的，而是在data中定义一个属性，且让属性的值等于value的值，就会被选中了。(反过来，如果选中了，则v-model = value)

data:{currentValue:"red"}

point: 以下两个radio 用同一个v-model="currentValue"表明是同一组。

<input type="radio" v-model="currentValue" value="red"/>

<input type="radio" v-model="currentValue" value="green"/>

// value= currentValue 的值后，rodio就会选中，其他的radio都不会选中。

使用v-bind：

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时

vm.pick === vm.a

section3--textarea:

与type=text差不多一样

section4--checkbox:

point 1:通过预设一个boolean值来控制多选，当我们点击时，vue会根据v-model设定的true false对应取反，过程我们看不见的。

e.g:这是一种不设置value属性的用法 ，其实checkbox原生应用中也是可以设置value的

data:{checked :true} //这里的checked是boolean

<input type="checkbox" >

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

point 2:click后checked的值vue会自动取反。

more exercise:设置checkbox中的value值，点击后通过v-model就会把value添加到数组上，value不设置就是null.

记得上面的value一定要设置，否则是null。

data：{toggle：true(可为任意值)}

point3--checkbox中的true-value = "yes2"自带属性 ，当用户点击的时候,vm.toggle === yes2

<input

type="checkbox"

v-model="toggle"

true-value="yes2"

false-value="no2"

>

section5--select:

有两种：1是普通的data中定义的属性用string类，即：v-model="'string'"，2.多选的要在元素上加一个multiple属性，v-model="[]",其它的都跟原生用法差不多。

e.g:

data:{ selected:[] }

<select v-model="selected" multiple >

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<span>Selected: {{ selected }}</span>

result:

ctrl + 左击：会将所有option的text添加到selected数组中。

select 原生使用：

<select>

<option value ="volvo">Volvo</option>

</select>

///////////////使用v-bind:///////////////////

<select v-model="selected">

<option v-bind:value="{mname:'tcc'}"></option>

</select>

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

vm.selected .mname = "tcc"

---------------------

作者：tangchangcai.

来源：CSDN

原文：https://blog.csdn.net/tangcc110/article/details/80181401

版权声明：本文为博主原创文章，转载请附上博文链接！