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 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,590评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,073评论 4 129
  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 5,968评论 7 113
  • 文/陆杍 12月16日的夜。 手机对话框弹出屏幕,家的微信群里,大姐发了两张宝贝们的照片。 一张是她家二姑娘,一张...
    苏木落阅读 875评论 2 3
  • 我今天学习很快乐,因为在学校上语文课,语文老师表扬我,所以我很开心。 上班队课我也很开心,因为我能听老师讲一些聪明...
    琦琦花仙子小月阅读 168评论 1 1