如何利用vue.js實(shí)現(xiàn)被選中狀態(tài)

小編給大家分享一下如何利用vue.js實(shí)現(xiàn)被選中狀態(tài)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

在使用原型實(shí)現(xiàn)使不選中狀態(tài)改變之后，接觸到vue，就想著能不能使用vue再把功能實(shí)現(xiàn)一邊，在上篇中的頁面并沒有動(dòng)態(tài)實(shí)現(xiàn)頁面，所有的數(shù)據(jù)也都是直接寫在html中。而使用vue之后，已經(jīng)能夠?qū)崿F(xiàn)頁面根據(jù)數(shù)據(jù)的多少動(dòng)態(tài)生成。而且代碼量也大幅度減少。

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>

數(shù)據(jù)代碼：

var datas = { 
 todos :[ 
 { 
 groupheader : 'MB3101', 
 groupbody:[ 
  { text: '調(diào)整不當(dāng)'}, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3102', 
 groupbody:[ 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3103', 
 groupbody:[ 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
  { text: '調(diào)整不當(dāng)' }, 
  { text: '光電開關(guān)損壞' }, 
  { text: '鏡面積灰' }, 
 ] 
 } 
 ] 
}

js部分的代碼：

new Vue({ 
 el: '#app', 
 data:datas, 
 methods:{ 
 exchange:function(event){ 
  //獲取被點(diǎn)擊的元素對(duì)象 
  var a = event.target; 
  //獲取被點(diǎn)擊元素中的子元素<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實(shí)現(xiàn)被選中狀態(tài)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！