首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue - 使用vue实现自定义多选与单选的答题功能

    本来实现多选单选这个功能,vue组件中在表单方面提供了一个v-model指令,非常的善解“猿”意, 能把我们的多选单选功能很完美且很强大得双向绑定起来,实现多选、单选、任意选...根本不在话下。...可悲的是,这个项目两个月后,我才来做项目复盘, 话说也就在此时,我才发现有一种更简单的方式来实现并且应用上v-model, 为什么要为了样式放弃功能然后自己吭哧吭哧傻滴呼呼的用js来实现了类似双向绑定的感觉...ref 要知道人家可是vue里边的特殊特性,   要知道人家可是很有能力的,   要知道我老是连着打不出妖之道这三个字!   好了不皮了。...第四个问题是,既然多选记录搞定了,那么单选呢,也应该在每次点击的时候搞定他吧?那是自然!...对的,每次单选点的是哪个就li,截取当前li内部文本的第一个字符,也就是ABC or D啊 this.

    4K20

    vue - v-model实现自定义样式の多选与单选

    来不及研究为什么,我先直接在原来项目上赶紧建了一个test页面,先赶紧实现我的这种设想: 使用v-model和原生表单也可以实现这么好看且达到需求的效果。...具体实现我想,vue官网有关于表单输入绑定的讲解和demo,事实上,我只要做到利用他的demo把我的数据和样式调整一下就万事大吉了! 没有什么比简单解决一个功能更让人开心的了!...而这一篇的实现方式正是还算巧妙的利用了该用的知识点。 也就不再需要li身上绑定的哪个choose事件来监听用户点击了。代码自己给我们做了!...最后因为本需求有多选和单选,作为单页应用,又因不需要渲染很多道题目,每次只渲染一道。 所以我们可以最后根据选项判断确定是需要多选还是单选,动态的切换这两套就行了。 这么一看是不是特别简单名了!...却被我之前实现的那么麻烦。。。。。我也是佩服自己光脚登山的傻劲。

    2.1K10

    基于Vue实现跨表格(单选、多选表格项,单表格限制)相互拖拽

    前言 今天,我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢,也调研了网上很多解决方案,但个人感觉不太符合现在做的这个需求。所以,压根就自己再开发一套,方便以后维护。 什么需求呢?...就是多个表格之间可以实现相互拖拽,即A表格中的表格项可以拖拽到B表格,B表格的表格项可以拖拽到C表格,并且它们之间可以单选、多选表格项相互拖拽。...此图非静止~ 实战 既然,我们知道了要实现怎样的效果,那么我们就开工吧! 第一步 需要确定我们这个需求需要安装哪些依赖。...只要监听电工表格或者操作员表格它们对应的数据长度就可以实现同步。为什么要分成两个表格呢?...下面,我们将分层来讲解逻辑实现。data方法中返回的对象我们看到只是初始化了一些数据,这里先不过多阐述。

    3.8K21

    CSS实现最简洁的单选折叠菜单

    不到万不得已的时候千万别引入前端UI框架,因为HTML5和CSS3已经能实现绝大多数的功能,比如上期的《CSS实现最简洁的开关》只用了不到50行css就实现了带动画的material design风格的开关...今天教大家用纯css实现一个单选的折叠菜单,不需要JavaScript就能用。折叠菜单和标签页差不多,逻辑上都是一种单选面板,只不过折叠菜单一般是垂直堆叠的,标签页是横着排列。...标签页: 既然是单选的,就可以用单选按钮来实现。...首先这些单选按钮组的父元素用,因为可以监听按钮组的变化,同时还能通过name属性直接得到RadioNodeList列表和变化值,非常方便,不用设置其他的css选择器了。...= radio) { input.checked = false; window.radio = null; } else window.radio = radio; }; 这样就实现了单选折叠菜单的反选能力

    5.3K20
    领券