vue表单元素的默认选中和表单元素的双向绑定

    前两天我在做项目的时候,遇到了如何模拟点击表单元素这个动作,当时我就想到了vue中通过$refs方法来获取vue实例,然后再将实例转化为jquery对象,从而通过jquery Api的prop方法来模拟选中。

    当然这种方法是走的通的,然而存在的问题也是明显的:第一:我们为了模拟选中这一行为,不得不单独引入了非常大的jquery包,这无疑增加了项目的冗余程度,再者vue官方是不推荐使用jquery操作dom;第二:虽然jquery简化了操作dom的操作,但是它的本质还是没变,即操作dom,而执行这种操作所需要的代价也是巨大的,所以是不可取的。

    正是基于此vue对于表单元素,特别是select和input提出了双向数据绑定的命令v-model


    对于select单选:

            我们可以通过v-model在input进行双向绑定,然后将input的value属性动态绑定为index(这里当然可以自由发挥,你也可以绑定其他值),然后通过v-model绑定的值(currentIndex)是否与当前选项value相等从而达到模拟选中,而且vue会忽略表单元素中的checked属性,直接使用v-model绑定的值

对于复选:

    要注意的是v-model绑定的是一个数组

对于select:

    注意v-model绑定是写在select标签上而非option上

    确实通过这种双向数据绑定,当然这也是vue区别于react的控制表单元素亮点之一,假如我们还用jquery那种模拟选中,岂不是 南辕北辙,使用vue的意义也不在了

你可能感兴趣的:(vue表单元素的默认选中和表单元素的双向绑定)