利用vue.js实现被选中状态的改变方法

来源：懂视网责编：小采时间：2020-11-27 22:20:01

利用vue.js实现被选中状态的改变方法

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

推荐度：

点击下载本文 文档为doc格式

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

在使用原型实现使不选中状态改变之后，接触到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.js实现被选中状态的改变方法

推荐度：

点击下载本文 文档为doc格式

标签： VUE 选中实现

热门焦点

利用vue.js实现被选中状态的改变方法

利用vue.js实现被选中状态的改变方法

利用vue.js实现被选中状态的改变方法

最新推荐

猜你喜欢

热门推荐