數(shù)據(jù)代碼：
var datas = {
todos :[
{
groupheader : 'MB3101',
groupbody:[
{ text: '調(diào)整不當(dāng)'},
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
]
},
{
groupheader : 'MB3102',
groupbody:[
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
]
},
{
groupheader : 'MB3103',
groupbody:[
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
{ text: '調(diào)整不當(dāng)' },
{ text: '光電開關(guān)損壞' },
{ text: '鏡面積灰' },
]
}
]
}js部分的代碼：
new Vue({
el: '#app',
data:datas,
methods:{
exchange:function(event){
//獲取被點(diǎn)擊的元素對(duì)象
var a = event.target;
//獲取被點(diǎn)擊元素中的子元素![]()
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實(shí)現(xiàn)被選中狀態(tài)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：如何利用vue.js實(shí)現(xiàn)被選中狀態(tài)
當(dāng)前地址：http://weahome.cn/article/ijihps.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
