使用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 document.referrer判断访客来源网址
May 15 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
微信小程序合法域名配置方法
May 06 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
JavaScript代码实现微博批量取消关注功能
Feb 05 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP二维数组去重算法
2016/12/17 PHP
php递归函数怎么用才有效
2018/02/24 PHP
javascript 日期常用的方法
2009/11/11 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
破解安装Pycharm的方法
2018/10/19 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS