<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style type="text/css">

 ul{

     width: 100%;

     height: 50px;

     line-height: 50px;

     overflow: visible;

 }

 .active{

 overflow: hidden;

 }

 li {

     float: left;

     width:100px;

     color: #f1f1f1;

     font-size: 18px;

     background-color: green;

     margin-left: 50px;

     padding-left: 20px;

     margin-top: 10px;

     list-style: none;

 }

 span{

     display: inline-block;

     margin-left: 10px;

     font-size: 18px;

     color: #ccc;

     line-height: 30px;

 }

 </style>

 <body>

     <div id="app">

           <ul :class="{active:flag}">

               <li v-for="todo in todos">{{todo.text}}

               </li>

             <p v-if ="todos.length>6" @click = "showTag"><span>{{flag?"展开":"收起"}}</span></p>

           </ul>

     </div>

 </body>

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

 <script type="text/javascript">

 var app = new Vue({

   el: '#app',

   data: {

      todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}],

      flag:true

   },

   methods:{

       showTag(){

           this.flag = !this.flag

       }

   }

 })

 </script>

 </html>

点击展开之后：主要用到的属性有ovflow属性，以及vue的动态绑定class

注：如果是自适应的就要读取浏览器的宽度了，6就要换成浏览器的宽度了，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style type="text/css">

ul{

    width: 100%;

    height: 50px;

    line-height: 50px;

    overflow: visible;

}

.active{

overflow: hidden;

}

li {

    float: left;

    width:100px;

    color: #f1f1f1;

    font-size: 18px;

    background-color: green;

    margin-left: 50px;

    padding-left: 20px;

    margin-top: 10px;

    list-style: none;

}

span{

    display: inline-block;

    margin-left: 10px;

    font-size: 18px;

    color: #ccc;

    line-height: 30px;

}

</style>

<body>

    <div id="app">

          <ul :class="{active:flag}">

              <li v-for="todo in todos">{{todo.text}}

              </li>

            <p v-if ="todos.length>6" @click = "showTag"><span>{{flag?"展开":"收起"}}</span></p>

          </ul>

    </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script type="text/javascript">

var app = new Vue({

  el: '#app',

  data: {

     todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}],

     flag:true,

     screenWidth:window.innerWidth

  },

  methods:{

      showTag(){

          this.flag = !this.flag

      }

  },

  mounted(){

      let that = this;

      window.onresize=()=>{

          return  (()=>{

               window.screenWidth = window.innerWidth;

               this.screenWidth = window.screenWidth;

          })()

      }

  },

  watch:{

      screenHeight(val){

         this.screenWidth = val

     }

  }

})

</script>

</html>

vue 点击展开显示更多 点击收起部分隐藏的更多相关文章

  1. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  2. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  3. vue实现点击展开,点击收起

    安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...

  4. 一次和别人争吵一个按钮，点击后显示导航；再点击不显示的效果，是否一定以及必须用js?

    事情经过是这样的,我们组一个说话很喜欢用一定,肯定的哥们,吃午饭的时候拿了自己做的一个UI库,头部有一个按钮 点击展开,再次点击收缩,他意思说一个按钮无法记录点击状态,必须使用js.然后我看了一眼,心 ...

  5. --@angularJS--指令之单个点击展开demo

    1.expander.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title&g ...

  6. Vue——轻松实现vue底部点击加载更多

    前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...

  7. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  8. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  9. listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠

    原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...

随机推荐

  1. 【spring源码分析】IOC容器初始化（二）

    前言:在[spring源码分析]IOC容器初始化(一)文末中已经提出loadBeanDefinitions(DefaultListableBeanFactory)的重要性,本文将以此为切入点继续分析. ...

  2. ESP8266最小系统

    http://www.dnsj88.com/Products/esp12f.html https://gitai.me/2017/04/Re-Zero-Starting-in-IoT/

  3. FreeHttp1.1升级说明

    一.升级方法 下载新版本插件 https://files.cnblogs.com/files/lulianqi/FreeHttp1.1.zip  或 http://lulianqi.com/file/ ...

  4. ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案

    ASP.NET Core 从2.2版本开始,采用了一个新的名为Endpoint的路由方案,与原来的方案在使用上差别不大,但从内部运行方式上来说,差别还是很大的.上一篇详细介绍了原版路由方案的运行机制, ...

  5. C#中的out 参数，ref参数，值参数

    大家可能在编码中或多或少的使用过out的ref,但是是否注意过他两的详细用法以及区别? 本文想介绍下详细介绍下out参数,ref参数以及一般值参数. 值参数 在使用参数时,把一个值传递给函数使用的一个 ...

  6. [代码]解析nodejs的require，吃豆人的故事

    最近在项目中需要对nodejs的require关键字做解析,并且替换require里的路径.一开始我希望nodejs既然作为脚本语言,内核提供一个官方的parser库应该是一个稳定可靠又灵活的渠道,然 ...

  7. 【刷题】Git工作流-相关知识点

    参考资料:[学习总结]Git学习-GIT工作流-千峰教育(来自B站) 1-Git工作流 GitFlow流五大分支: 主干分支 热修复分支 预发布分支 开发分支 功能分支 GitFlow 工作流定义了一 ...

  8. 【MongoDB异常】Exception authenticating MongoCredential解决方法

    我们通过ideal编辑器编辑 springboot时候,出现这个错误: com.mongodb.MongoSecurityException: Exception authenticating Mon ...

  9. Linux下MySql的登陆和管理操作

    一.mysql数据库启停1.linux下启动mysql的命令:    mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径)2.linux下重启 ...

  10. Git-01-上传项目到github

    function fun1(){ Git上传项目到github Folder-->Git bash here Execute command: --git clone 仓库地址     多出一个 ...