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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
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 获取全局变量的代码
2011/04/21 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
在python中bool函数的取值方法
2018/11/01 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
函授自我鉴定
2013/11/06 职场文书
个人自我鉴定
2013/11/07 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android