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 相关文章推荐
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
javascript操作cookie
Jan 17 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
微信小程序倒计时功能实现代码
Nov 09 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
paypal即时到账php实现代码
2010/11/28 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
社区工作者先进事迹
2014/01/18 职场文书
员工工作表现评语
2014/04/26 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
R9700摩机记
2022/04/05 无线电