<!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. fastjson SerializerFeature详解

  2. 基于android的天气预报的设计与实现

    目录 应用开发技术及开发平台介绍 应用需求分析 应用功能设计及其描述 应用UI展示 ①开发技术: 本系统是采用面向对象的软件开发方法,基于Android studio开发平台,以Android作为本系 ...

  3. Java 8 Stream介绍及使用2

    (原) stream中另一些比较常用的方法. 1. public static<T> Stream<T> generate(Supplier<T> s) 通过gen ...

  4. “Axure”介绍

    一． Axure RP简介: Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与 ...

  5. flex.css

    flex.css:https://codepen.io/webstermobile/pen/apXEER/

  6. MySQL数据库日志文件（redo与undo）

    +++++++++++++++++++++++++++++++++++++++++++标题:MySQL数据库日志文件时间:2019年2月25日内容:MySQL数据库日志文件(redo日志和undo日志 ...

  7. 宝塔控制面板创建ftp后链接不上的解决方法

    很多的新手在安装宝塔面板并且创建完ftp管理后链接ftp居然链接不上?有许多朋友都不知道本站q302博客也是基于宝塔控制面板管理的,本站在安装网站完成后也和你们一样ftp链接不上,后面经过多次测试之后 ...

  8. SpringMVC model 多余字段 忽略

    spring-mybaits的model中如何通过注解忽略非数据库字段?——CSDN问答频道https://ask.csdn.net/questions/643534 ObjectMapper忽略多余 ...

  9. Ajax 的优势和不足

    Ajax 的优势 1. 不需要插件支持 Ajax 不需要任何浏览器插件,就可以被绝大多数主流浏览器所支持,用户只需要允许 JavaScript 在浏览器上执行即可. 2. 优秀的用户体验 这是 Aja ...

  10. WebSocket群聊与单聊

    一 . WebSocket实现群聊 py文件代码 # py文件 from flask import Flask, render_template, request from geventwebsock ...