vue判断是否被选中_利用vue.js实现被选中状态的改变方法

在使用原型实现使不选中状态改变之后，接触到vue，就想着能不能使用vue再把功能实现一边，在上篇中的页面并没有动态实现页面，所有的数据也都是直接写在html中。而使用vue之后，已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。

html部分的代码：

• {{todo.groupheader}}

  • {{ cell.text }}

    

数据代码：

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;

//获取被点击元素中的子元素

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