使用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=' group header ' div Class=' Gheadertext ' { todo . group header } }/div/div Class=' group body ' ul Class=' list ' Li v-for=' cell in todo . group body ' v-: click=' exchange($ event)Class=' group cell ' div Class=' cell text ' { cell . text。

vardata={ todos :[{ group header : ' MB 3101 }，groupbody3360 [{text: '调节不当' }，{text: '光电开关损坏' }，{text: '后视镜区域为灰色' }，{text: '调节不当' }，{text: '光电开关损坏' }，{ text 3: '后视镜区域为灰色' }，{ text 3: 'Groupbody:[ {text: '调节不当' }，{text: '光电开关损坏' }，{text: '后视镜区域灰色' }，{text: '调节不当' }，{text: '光电开关损坏' }，{text: '后视镜区域灰色' }，{text: '调节不当' }，{ text 3: '光电开关损坏' }，{ text 3:

Newvue ({el:' # app '，data:data，methods : { exchange 3360 function(event){//获取被单击的元素对象var a=event.target//获取子元素img var cell img=a . getelementsbytagname(' img ')[0]；if(a . class name=' group cell '){ a . class name=' selectcell '；cellimg . style . display=' block '；} else if(a . CLaSS name=' select cell '){ a . CLaSS name=' group cell '；cellimg . style . display=' none '；}}}})效果如图：

以上使用vue.js改变选中状态的方法是边肖分享的全部内容，希望能给大家一个参考和支持。