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数字转换为float,取N位小数
Feb 08 Javascript
javascript实现数独解法
Mar 14 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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的优点与缺点
2013/04/11 PHP
php根据年月获取季度的方法
2014/03/31 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
jquery radio 操作代码
2011/03/16 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
简述JS控制台的使用
2018/07/15 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python写日志封装类实例
2015/06/28 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python如何实现一个刷网页小程序
2018/11/27 Python
利用Python计算KS的实例详解
2020/03/03 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
项目考察欢迎辞
2014/01/17 职场文书
初中新生军训方案
2014/05/13 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
Python中time标准库的使用教程
2022/04/13 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python