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


Posted in Javascript onApril 23, 2019

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

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

- 实现效果如图

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

需求描述:

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

返回的数据类型

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

前端页面代码

<div class="leftProcessBox">
   <div class="leftProcess" v-for="(listLZPar,index) in listLZParams" v-show="listLZPar.operate_type!=''">
     <div class="process">
       <div class="processPointLine">
         <div class="processPoint">
           <i class="ico iconfont icon-circleyuanquan iconCircle " v-show="index==0"></i>
           <i class="ico iconfont icon-yuan iconCircle" v-show="index!=0"></i>
           <div class="characterInfo">{{listLZPar.operate_type | operatertypeToName}}</div>
         </div>
         <div class="processLine" v-show="!(index == listLZParams.length-1)">
         </div>
       </div>
     </div>
   </div>
 </div>

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

<li @click="show">
  <span>1</span>
</li>
<li @click="show">
   <span>1</span>
</li>
<li @click="show">
   <span>1</span>
</li>

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

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

<div id="app">
 <ul>
  <li v-for="list in lists" @click="show($index)">
   <span v-show="$index !== i">{{ list }}</span>
  </li>
 </ul>
</div>
<script>
new Vue({
 el: '#app',
 data: {
  lists: [1, 1, 1],
  i: -1 
 },
 methods: {
  show (index) {
   this.i = index
  }
 }
})
</script>

方法2:

<ul id="app">
 <li v-for='item in items' @click="toggle(item)">
  <span v-if='item.show'>{{item.content}}</span>
 </li>
</ul>
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循环列表控制按钮隐藏显示功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
原生js实现吸顶效果
Mar 13 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 #Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 #Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 #Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
You might like
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
禁止F5等快捷键的JS代码
2007/03/06 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
python字符串中的单双引
2017/02/16 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python通过文本和图片生成词云图
2020/05/21 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
同学会主持词
2014/03/18 职场文书
家长会主持词
2014/03/26 职场文书
工厂车间标语
2014/06/19 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
工程承包协议书范本
2014/09/29 职场文书
出售房屋协议书范本
2014/10/06 职场文书
实习工作表现评语
2014/12/31 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
创业计划书之物流运送
2019/09/17 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL