微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

利用vue.js实现被选中状态的改变方法

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中。而使用vue之后,已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。

html部分的代码

rush:xhtml;">
  • odo in todos ">
    odo.groupheader}}
  • odo.groupbody" v-on:click="exchange($event)" class="groupcell">

    数据代码

    rush:xhtml;"> var datas = { todos :[ { groupheader : 'MB3101',groupbody:[ { text: '调整不当'},{ text: '光电开关损坏' },{ text: '镜面积灰' },{ text: '调整不当' },] },{ groupheader : 'MB3102',groupbody:[ { text: '调整不当' },{ groupheader : 'MB3103',] } ] }

    js部分的代码

    rush:xhtml;"> new Vue({ el: '#app',data:datas,methods:{ exchange:function(event){ //获取被点击的元素对象 var a = event.target; //获取被点击元素中的子元素 var cellimg = a.getElementsByTagName("img")[0]; if(a.className == "groupcell") { a.className = "selectcell"; cellimg.style.display = "block"; } else if(a.className == "selectcell") { a.className = "groupcell"; cellimg.style.display = "none"; } } } })

    效果如图所示:

    以上这篇利用vue.js实现被选中状态的改变方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

    原文地址:https://www.jb51.cc/vue/33791.html

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐