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 를 이용 하여 선 택 된 상 태 를 바 꾸 는 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 을 바 랍 니 다.