vue实现div单选多选功能
更新时间:2020年07月16日 11:08:13 作者:sch695241721
这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
vue实现div单选多选功能,供大家参考,具体内容如下
单选
单选:
多选:
单选功能
DOM层:
<div class="labeloption" :class="{checked:ageActive == 11}" @click="changeStatus(11)">0-16岁</div> <div class="labeloption" :class="{checked:ageActive == 12}" @click="changeStatus(12)">17-25岁</div> <div class="labeloption" :class="{checked:ageActive == 13}" @click="changeStatus(13)">26-35岁</div> <div class="labeloption" :class="{checked:ageActive == 14}" @click="changeStatus(14)">36-45岁</div> <div class="labeloption" :class="{checked:ageActive == 15}" @click="changeStatus(15)">46-55岁</div> <div class="labeloption" :class="{checked:ageActive == 16}" @click="changeStatus(16)">55岁以上</div>
js层:
new Vue({ el: '#home', data() { return { ageActive:11 //初始选中状态的元素id } }, methods: { changeStatus(number){ this.ageActive = number; } } })
单选功能主要利用的是vue的数据驱动原则改变当前dom元素的状态
多选功能
DOM层:
<div class="labeloption checked" @click="changeStatus($event,11)">0-16岁</div> <div class="labeloption" @click="changeStatus($event,12)">17-25岁</div> <div class="labeloption" @click="changeStatus($event,13)">26-35岁</div> <div class="labeloption" @click="changeStatus($event,14)">36-45岁</div> <div class="labeloption" @click="changeStatus($event,15)">46-55岁</div> <div class="labeloption" @click="changeStatus($event,16)">55岁以上</div>
js层:
new Vue({ el: '#home', data() { methods: { changeStatus(e,number){ if (e.target.className.indexOf("checked") == -1) { e.target.className = "labeloption checked"; //选中div样式 } else { e.target.className = "labeloption";//未选中div样式 } } })
多选功能于单选功能不同,没有用到vue的数据驱动原则,单纯的操作dom元素,跟vue没啥关系。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Element-ui的table中使用fixed后出现行混乱情况的解决
这篇文章主要介绍了Element-ui的table中使用fixed后出现行混乱情况的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10解决在Vue中使用axios POST请求变成OPTIONS的问题
这篇文章主要介绍了解决在Vue中使用axios POST请求变成OPTIONS的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08vue 绑定使用 touchstart touchmove touchend解析
这篇文章主要介绍了vue 绑定使用 touchstart touchmove touchend解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03如何解决this.$refs.form.validate()不执行的问题
这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论