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

 更新时间:2018年02月08日 09:47:02   作者:Firoly  
下面小编就为大家分享一篇利用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="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实现被选中状态的改变方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3解决各场景loading过度的五种方法

    vue3解决各场景loading过度的五种方法

    这篇文章主要为大家详细介绍了vue3中解决各场景loading过度的五种方法,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下
    2023-11-11
  • vue实现el-menu与el-tabs联动的项目实践

    vue实现el-menu与el-tabs联动的项目实践

    本文讲述了如何使用Vue.js中的ElementUI组件库实现el-menu与el-tabs的联动,通过在el-menu中选择菜单项,可以切换el-tabs的内容区域,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • vue中使用 pako.js 解密 gzip加密字符串的方法

    vue中使用 pako.js 解密 gzip加密字符串的方法

    这篇文章主要介绍了vue项目中 使用 pako.js 解密 gzip加密字符串 的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue轮播图插件vue-awesome-swiper的使用代码实例

    vue轮播图插件vue-awesome-swiper的使用代码实例

    本篇文章主要介绍了vue轮播图插件vue-awesome-swiper的使用代码实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue实现评论列表

    vue实现评论列表

    这篇文章主要为大家详细介绍了vue实现评论列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue大屏展示适配的方法

    vue大屏展示适配的方法

    这篇文章主要为大家详细介绍了vue大屏展示适配,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue实现百度语音合成的实例讲解

    vue实现百度语音合成的实例讲解

    在本篇文章里小编给大家整理的是关于vue实现百度语音合成的实例内容,以及相关代码,需要的朋友们参考下。
    2019-10-10
  • vue数组对象排序的实现代码

    vue数组对象排序的实现代码

    这篇文章主要介绍了vue数组对象排序的实现代码,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • vue轮播图插件vue-awesome-swiper

    vue轮播图插件vue-awesome-swiper

    这篇文章主要为大家详细介绍了vue轮播图插件vue-awesome-swiper,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 详解vue中的动态组件component和keep-alive

    详解vue中的动态组件component和keep-alive

    这篇文章主要介绍了详解vue中的动态组件component和keep-alive的相关资料,这大家需要注意include属性和exclude属性只能用一个,不能同时使用,本文给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11

最新评论