数据代码：
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实现被选中状态”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文名称：如何利用vue.js实现被选中状态
文章转载：http://bjjierui.cn/article/ijihps.html
