Using vue. js to change the selected status, vue. js is selected

Using vue. js to change the selected status, vue. js is selected

After using the prototype to change the unselected status and accessing vue, you can think about whether you can use vue to implement the function. The page in the previous article does not dynamically implement the page, all data is directly written in html. After vue is used, the page can be dynamically generated based on the amount of data. The amount of code is also greatly reduced.

Html code:

<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>      </li>   </ul>   </div>   </li>  </ul>  </div>  </div> </div> 

Data Code:

Var datas = {todos: [{groupheader: 'mb3101 ', groupbody: [{text: 'improperly adjusted'}, {text: 'photoelectric switch corrupt '}, {text: 'mirror gray '}, {text: 'improperly adjusted'}, {text: 'photoelectric switch damaged '}, {text: 'mirror gray'}, {text: 'improperly adjusted '}, {text: 'photoelectric switch damaged'}, {text: 'mirror gray '},]}, {groupheader: 'mb3102', groupbody: [{text: 'improperly adjusted '}, {text: 'photoelectric switch damaged'}, {text: 'mirror gray '}, {text: 'improperly adjusted '}, {text: 'optical switch damaged '}, {text: 'mirror gray'}, {text: 'improperly adjusted '}, {text: 'photovoltaic switch damaged '}, {text: 'mirror gray '},]}, {groupheader: 'mb3103', groupbody: [{text: 'improperly adjusted '}, {text: 'optical switch damaged '}, {text: 'mirror gray'}, {text: 'improperly adjusted '}, {text: 'photovoltaic switch damaged'}, {text: 'mirror gray '}, {text: 'improperly adjusted'}, {text: 'photoelectric switch damaged '}, {text: 'mirror gray'},]}

Js Code:

New Vue ({el: '# app', data: datas, methods: {exchange: function (event) {// obtain the clicked Element Object var a = event.tar get; // obtain the child element  var cellimg =. getElementsByTagName ("img") [0]; if (. className = "groupcell") {. className = "selectcell"; cellimg. style. display = "block";} else if (. className = "selectcell") {. className = "groupcell"; cellimg. style. display = "none ";}}}})

Effect:

The above method of using vue. js to change the selected status is all the content that I have shared with you. I hope to give you a reference and support for the customer's house.