<!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. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  2. js中uuid不被识别

    后台传了uuid值给前台,然后js报错 原因:反正就是js不认你这个字符串,他觉得你这是应该是数字,但是后面想了想,也不是数字啊,然后就不认了. 解决办法:告诉他,为夫这里是字符串.拼接html的时候 ...

  3. Pairwise 找到你的另一半

    都说优秀的程序员擅长面向对象编程,但却经常找不到另一半,这是为什么呢?因为你总是把自己局限成为一个程序员,没有打开自己的思维. 这是一个社群的时代啊,在这里你应该找到与你有相同价值观但又互补的另一半. ...

  4. 2016湖南省赛 [Cloned]

    A.2016 给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量: 1. 1≤a≤n,1≤b≤m; 2. a×b 是 2016 的倍数. Input   输入包含不超过 30 组数 ...

  5. JAVA反射优化

    ****************** 转自 https://my.oschina.net/19921228/blog/3042643 *********************** 比较反射与正常实例 ...

  6. DAY22、面向对象

    一.复习:1.面向过程与面向对象 过程:程序流程化,可拓展性差 对象:程序流程多样化,可拓展性强 面向对象引入属性 | 方法的概念,通过所属者.语法调用2.拥有名称空间的对象:有__dict__属性, ...

  7. LODOP中tfoot和tbody中间线连不起来

    这种情况发生在使用ADD_PRINT_TABLE时,ADD_PRINT_TABLE是Lodop中专门用来输出table表格的语句,它有很多特点,比如该语句不切行(详细可参考查看本博客相关博文:LODO ...

  8. WebSocket介绍，与Socket的区别

    WebSocket介绍与原理 WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex).一开始的握手需要借助HTTP请求完成. ——百 ...

  9. mysql-SELECT子句的顺序

  10. jmap -histo pid 输出的[C [B [I [S methodKlass constantPoolKlass含义

    jmap -histo pid 输出的[C [B [I [S methodKlass constantPoolKlass含义 2014年01月16日 11:00:12 lxb_champagne 阅读 ...