如何利用vue.js实现被选中状态-创新互联

小编给大家分享一下如何利用vue.js实现被选中状态，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站专注于企业成都营销网站建设、网站重做改版、洛隆网站定制设计、自适应品牌网站建设、成都h5网站建设、成都商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为洛隆等各大城市提供网站开发制作服务。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

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

html部分的代码：

 
  
  
  
  
   
  {{todo.groupheader}}

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

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实现被选中状态-创新互联

为什么要使用Vue

其他资讯