vue实现点击展开点击收起效果


Posted in Javascript onApril 27, 2018

安装vue的步骤在这里就不进行赘述了,下面直接进入正题

  首先定义一下data里面的数据:

data () {
  return {
   toLearnList:[
    'html','css','javascript','java','php'  //进行显示的数据
   ],
   showAll:false, 






//标记数据是否需要完全显示的属性
  }
 }

  使用computed对data进行处理:

computed:{
  showList:function(){
   if(this.showAll == false){          //当数据不需要完全显示的时候
    var showList = [];





  //定义一个空数组
    if(this.toLearnList.length > 3){


 //这里我们先显示前三个
     for(var i=0;i<3;i++){
      showList.push(this.toLearnList[i])
     }
    }else{
     showList = this.toLearnList
    }
    return showList;







 //返回当前数组
   }else{
    return this.toLearnList;
   }
  },
  word:function(){
   if(this.showAll == false){




 //对文字进行处理
    return '点击展开'
   }else{
    return '点击收起'
   }
  }
 }

template:循环的时候直接用showList进行操作,显示收起的事件直接用showAll = !showAll 进行控制,改变这个值的真假

<template>
 <div class="hello">
   <div v-for='item in showList'>{{item}}</div>
   <div @click="showAll = !showAll" class="show-more">{{word}}</div>
 </div>
</template>

总结

以上所述是小编给大家介绍的vue实现点击展开点击收起效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
js实现课堂随机点名系统
Nov 21 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 #Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 #Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 #Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 #Javascript
Node.js文件编码格式的转换的方法
Apr 27 #Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
基于Vue实现拖拽效果
Apr 27 #Javascript
You might like
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
js里的prototype使用示例
2010/11/19 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Flask框架web开发之零基础入门
2018/12/10 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
法国家具及室内配件店:home24
2017/01/21 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
个人委托书范文
2015/01/28 职场文书
《落花生》教学反思
2016/02/16 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技