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>

data コード:

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コンポーネントでrefsを使用する方法

vue-cliプロジェクトにおけるProxyTableのクロスドメインの問題

クエリサーバーのExpress構築

以上がvue.jsを使用して選択した変更メソッドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。