使用vue.js如何實作被選取的改變方法-js教程-PHP中文網

使用vue.js如何實作被選取的改變方法

亚连

發布： 2018-06-07 11:10:05

原創

1729 人瀏覽過

下面我就為大家分享一篇利用vue.js實現被選中狀態的改變方法，具有很好的參考價值，希望對大家有幫助。

在使用原型實現使不選中狀態改變之後，接觸到vue，就想著能不能使用vue再把功能實現一邊，在上篇中的頁面並沒有動態實現頁面，所有的數據也都是直接寫在html。而使用vue之後，已經能夠實現頁面根據資料的多少動態產生。而且程式碼量也大幅減少。

html部分的程式碼：

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

登入後複製

資料程式碼：

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

登入後複製

js部分的程式碼：

new Vue({ 
 el: &#39;#app&#39;, 
 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"; 
 } 
 } 
 } 
})

登入後複製

#效果如圖所示：