前两天我在做项目的时候，遇到了如何模拟点击表单元素这个动作，当时我就想到了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的意义也不在了
网友评论