首頁 >web前端 >js教程 >使用vue.js如何實作被選取的改變方法

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

亚连原創: 2018-06-07 11:10:051762瀏覽

下面我就為大家分享一篇利用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"; 
 } 
 } 
 } 
})

#效果如圖所示：

上面是我整理給大家的，希望今後會對大家有幫助。

在React元件中refs的使用方法

在vue-cli專案中proxyTable跨域問題

express建置查詢伺服器

以上是使用vue.js如何實作被選取的改變方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：怎樣對vue專案api介面進行管理下一篇：怎樣對vue專案api介面進行管理

看更多