首页 > web前端 > js教程 > 正文

使用vue.js如何实现被选中的改变方法

亚连
发布: 2018-06-07 11:10:05
原创
1745 人浏览过

下面我就为大家分享一篇利用vue.js实现被选中状态的改变方法,具有很好的参考价值,希望对大家有所帮助。

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

html部分的代码:

<p data-role="page " class="page "> 
 <p class="center " id="app"> 
 <p class="group "> 
 <ul> 
 <li v-for = "todo in todos "> 
  <p class="groupheader "> 
  <p class="Gheadertext ">{{todo.groupheader}}</p> 
  </p> 
  <p class = "groupbody "> 
  <ul class="list "> 
  <li v-for="cell in todo.groupbody" v-on:click="exchange($event)" class="groupcell"> 
  <p class="celltext"> 
   {{ cell.text }} 
  </p> 
  <img class="selectimg" src="img/select.png "> 
  </li> 
  </ul> 
  </p> 
  </li> 
 </ul> 
 </p> 
 </p> 
</p>
登录后复制

数据代码:

var datas = { 
 todos :[ 
 { 
 groupheader : &#39;MB3101&#39;, 
 groupbody:[ 
  { text: &#39;调整不当&#39;}, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
 ] 
 }, 
 { 
 groupheader : &#39;MB3102&#39;, 
 groupbody:[ 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
 ] 
 }, 
 { 
 groupheader : &#39;MB3103&#39;, 
 groupbody:[ 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
  { text: &#39;调整不当&#39; }, 
  { text: &#39;光电开关损坏&#39; }, 
  { text: &#39;镜面积灰&#39; }, 
 ] 
 } 
 ] 
}
登录后复制

js部分的代码:

new Vue({ 
 el: &#39;#app&#39;, 
 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"; 
 } 
 } 
 } 
})
登录后复制

效果如图所示:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在React组件中refs的使用方法

在vue-cli项目中proxyTable跨域问题

express搭建查询服务器

以上是使用vue.js如何实现被选中的改变方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板