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" id="checkbox" v-model="checked">

                    <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 style="width: 50px;">
        <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
版权声明:本文为博主原创文章,转载请附上博文链接!

猜你喜欢

转载自www.cnblogs.com/itgezhu/p/10947403.html