热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用Vue中v-for循环列表控制按钮隐藏显示功能

这篇文章主要介绍了使用Vue中v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下

v-for可以把数据中的一个数组对应为一组元素

v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

- 实现效果如图

这里写图片描述

需求描述:

第一个显示蓝色按钮,代表数据最终状态;其余按钮为灰色,显示数据流转记录。

返回的数据类型

这里写图片描述

前端页面代码

{{listLZPar.operate_type | operatertypeToName}}

PS:vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

  • 1
  • 1
  • 1
  • li点击只让当前的 li 下面的span 隐藏

    方法一:用vue就尽量遵从数据驱动的想法,实现这个的方法很多,但是尽量不要直接去操作dom。

    • {{ list }}

    方法2:

    • {{item.content}}
    new Vue({
     el: '#app',
     data: function() {
      return {
       items: [{
        content: '1 item',
        show: true
       }, {
        content: '2 item',
        show: true
       }, {
        content: '3 item',
        show: true
       }]
      }
     },
     methods: {
      toggle: function(item) {
          item.show = !item.show;
      }
     }
    })

    总结

    以上所述是小编给大家介绍的使用Vue中 v-for循环列表控制按钮隐藏显示功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


    推荐阅读
    • 本文综述了沙尘天气的气象条件,特别关注北京地区的沙尘污染特征,探讨了沙尘期间的气溶胶光学厚度变化、大颗粒物浓度上升以及冷锋作为重要起沙条件的作用。 ... [详细]
    • 深入解析Unity3D游戏开发中的音频播放技术
      在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
    • 本文提供了一种通过调整内核电压来增强设备抗干扰能力的方法,以解决部分杰里AC696X设备在LDO15模式下通话时出现的重启问题。 ... [详细]
    • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
    • 如何在PPT中创建交互式跳转按钮
      许多企业在日常工作中都会用到PPT,但你知道如何在PPT中制作一个可以实现页面跳转的按钮吗?本文将详细介绍在PPT中创建跳转按钮的方法和步骤。 ... [详细]
    • 本文对元代诗人萨都剌的《酹江月·姑苏台怀古》进行了详尽的翻译和赏析,深入探讨了诗中蕴含的历史情感与文化内涵。 ... [详细]
    • 一文详解Linux
      Linuxnetfilter与VRF实验环境如下图所示:配置如下:#!binbashsudoipnetnsaddns1sudoiplinkaddns1veth1typevethpe ... [详细]
    • 网络分析仪中的噪声参数解析
      本文探讨了网络分析仪中噪声参数的作用及其对测量精度的影响。通过深入分析噪声参数如何随源阻抗变化,解释了其在不同测量条件下的表现。 ... [详细]
    • JavaScript 跨域解决方案详解
      本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
    • 最适合初学者的编程语言
      本文探讨了适合编程新手的最佳语言选择,包括Python、JavaScript等易于上手且功能强大的语言,以及如何通过有效的学习方法提高编程技能。 ... [详细]
    • 3DSMAX制作超现实的体育馆模型
      这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
    • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
    • 如何辨别华为手机的不同屏幕分辨率?
      了解华为手机屏幕分辨率的区别及其识别方法对于提升用户体验至关重要。本文将详细介绍如何通过手机设置中的显示选项来查看和区分不同型号华为手机的屏幕分辨率。 ... [详细]
    • 本文详细介绍了使用MAX7219芯片驱动单个8x8 LED点阵的仿真过程。MAX7219作为一款高效的LED显示驱动器,广泛应用于各种工业控制面板、商业广告牌及DIY项目中,能够显著提升显示效果。 ... [详细]
    • Unity美洲技术总监Carl Callewaert探讨游戏引擎与动作捕捉技术
      Carl Callewaert,现任Unity美洲区技术总监,以其幽默和专业著称,拥有超过十年的游戏开发及教育经验。在UNITE 2016 Shanghai会议中,他不仅展示了Unity引擎的先进特性和最新研究进展,还以其独特的即兴说唱技能给观众留下了深刻印象。 ... [详细]
    author-avatar
    cfpage
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有