利用vue.js實現被選中狀態的改變方法

2019-11-19 14:23:33

字體：大中小

來源：轉載

供稿：網友

在使用原型實現使不選中狀態改變之后，接觸到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";  }  }  } })

效果如圖所示：