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 相关文章推荐
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
localStorage实现便签小程序
Nov 28 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
Vue自定义多选组件使用详解
Sep 08 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/08/06 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Django的分页器实例(paginator)
2017/12/01 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
减负增效提质方案
2014/05/23 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
面试通知邮件
2015/04/20 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技