<!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. java网络爬虫基础学习（一）

    刚开始接触java爬虫,在这里是搜索网上做一些理论知识的总结 主要参考文章:gitchat 的java 网络爬虫基础入门,好像要付费,也不贵,感觉内容对新手很友好. 一.爬虫介绍 网络爬虫是一个自动提 ...

  2. Neuroph开发过程

    文章提纲 安装与配置 开发小结 建立项目 配置项目 理解感知机的代码 安装与配置 JDK的安装:建议JRE 1.8以上: Neuroph安装:建议2.94的版本.下载地址 neuroph-core-2 ...

  3. ProxyChains 的坑, 需要关闭 sip

    之前 10.12.6 还可以的,现在升级下系统就用不了了. search下发生时sip问题. 解决方案就时要关闭这个东西; 关闭SIP reboot # 按住 option 键 # 到系统选择页面后, ...

  4. 2018-2019-2 20175217 实验二《Java面向对象程序设计》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:吴一凡 学号:20175217 指导教师:娄嘉鹏 实验日期:2019年4月15日 实验时间:--- 实验序号:实验二 实验名称:Jav ...

  5. CSS问题

    当标签之间有缝隙  两个a标签之间消除缝隙  可在div设置 font-size:0 ul下的li去掉小圆点:设置 ul list-style:none <div> <a> & ...

  6. 消息队列比较-rabbitmq/kafka/rocketmq/ONS

    主要是比较这几种队列中间件: rabbitmq kafka rocketmq ONS 分以下几个维度来比较 高并发 毫无疑问KAFKA发消息的速度是最快的 ROCKETMQ/ONS次之 rabbitm ...

  7. checkeds 选中获取tbale表格中某一列td标签中的值

    例如:  var checkedbox = $("input[type=checkbox][name='cid']:checked")   if (checkedbox.size( ...

  8. day07（数据类型的相互转换 ，字符编码）

    一,复习: ''' 1,深浅拷贝 ls = [1,'a',[10]] 值拷贝:直接赋值 ls1 = ls,ls中的任何值发生改变,ls1也随之发生改变 浅拷贝:通过copy()方法 ls2 = ls. ...

  9. java基础-01基本概念

    java的特点 跨平台 所谓的平台,我们可以理解为操作系统. 大部分语言是不能跨平台的,比如c语言的程序在windows和linux上需要编写不同的代码. java程序是运行在JVM(Java Vir ...

  10. 微信内无法自动跳转外部浏览器打开H5分享链接的解决办法

    很多情况下我们用微信分享转发H5链接的时候,都无法在微信内打开,即使开始能打开,过一段时间就会被拦截,拦截后再打开微信会提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1 ...