如何利用vue.js实现被选中状态

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

创新互联建站IDC提供业务:雅安移动机房,成都服务器租用,雅安移动机房,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。

为什么要使用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

其他资讯