利用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实现被选中状态的改变方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

• vue中改变选中当前项的显示隐藏或者状态的实现方法
• vue绑定的点击事件阻止冒泡的实例
• Vue.js 点击按钮显示/隐藏内容的实例代码