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实现的网页颜色代码表全集
Jul 17 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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入门速成教程
2007/03/19 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python学生管理系统代码实现
2020/04/05 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
pandas值替换方法
2018/07/10 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
银行自荐信范文
2015/03/25 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
开票证明
2015/06/23 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技