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

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

html部分的代码：

<div data-role=\"page \" class=\"page \"> 
 <div class=\"center \" id=\"app\"> 
 <div class=\"group \"> 
 <ul> 
 <li v-for = \"todo in todos \"> 
  <div class=\"groupheader \"> 
  <div class=\"Gheadertext \">{{todo.groupheader}}</div> 
  </div> 
  <div class = \"groupbody \"> 
  <ul class=\"list \"> 
  <li v-for=\"cell in todo.groupbody\" v-on:click=\"exchange($event)\" class=\"groupcell\"> 
  <div class=\"celltext\"> 
   {{ cell.text }} 
  </div> 
  <img class=\"selectimg\" src=\"img/select.png \"> 
  </li> 
  </ul> 
  </div> 
  </li> 
 </ul> 
 </div> 
 </div> 
</div> 

数据代码：

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: \'镜面积灰\' }, 
 ] 
 } 
 ] 
} 

js部分的代码：

new Vue({ 
 el: \'#app\', 
 data:datas, 
 methods:{ 
 exchange:function(event){ 
  //获取被点击的元素对象 
  var a = event.target; 
  //获取被点击元素中的子元素<img> 
  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实现被选中状态的改变方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。