vue.js를 사용하여 선택한 변경 방법을 구현하는 방법

아래에서는 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 : '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"; 
 } 
 } 
 } 
})

효과는 다음과 같습니다. 사진:

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

React 구성 요소에서 참조를 사용하는 방법

vue-cli 프로젝트의 ProxyTable 도메인 간 문제

Express 쿼리 서버 구축

위 내용은 vue.js를 사용하여 선택한 변경 방법을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!