<!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. SSIS中xml的输入输出

    输出为XML的两种方法 1.用数据流, 将平面文件作为DES输出 在SQL里将要输出的数据查询成为单列的字符串: SELECT (SELECT * FROM A FOR XML ROOT('A'),E ...

  2. Java中String、StringBuilder、StringBuffer的区别

    常量还是变量: String是字符串常量(以final修饰符进行修饰,不可更改): StringBuilder是字符串变量 StringBuffer是字符串变量 线程安全: String无所谓线程安全 ...

  3. 考据：internet 和 Web

    我们有时大谈互联网发展趋势,有时讨论Web开发:有时说因特网如何,有时又说万维网怎样.但身处其间我们,有时雾里看花,对有些东西一知半解,这里对internet和Web进行一个简单梳理(很多东西缺少可信 ...

  4. jmeter学习记录--04--Beanshell

    一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法;BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanSh ...

  5. Java中newInstance()和new()区别

    前言: 最近在看springIOC和AOP是看见代码中很实用newInstance来实例化一个对象,之前对newInstance和new实例化对象的区别很模糊,特意在这里记录一下 一.newInsta ...

  6. 一次jdk1.7升级jdk1.8后导致redis运行时blocked_clients过多问题解决

    公司有个采集项目,因为请求量较大,添加了redis集群,并且升级了原有的jdk1.7到jdk1.8版本,之后问题就出来了. 1.程序运行一段时间就自动停止,必须重启才能再次运行. 2.redis连接监 ...

  7. css块居中

    1.已知宽高的块级元素居中: 2.未知宽高的块级元素居中:

  8. noip2017部分题目

    D1T3 逛公园 题目描述 策策同学特别喜欢逛公园.公园可以看成一张NN个点MM条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,NN号点是公园的出口,每条边有一个非负权值, 代表策策经过 ...

  9. crontab计划任务实例

    使用实例 实例1:每1分钟执行一次command 命令: * * * * * command 实例2:每小时的第3和第15分钟执行 命令: 3,15 * * * * command 实例3:在上午8点 ...

  10. 20165223《信息安全系统设计基础》第九周学习总结 & 第八周课上测试

    目录 [第九周学习总结] 教材内容总结 [第八周课上测试] (一)求命令行传入整数参数的和 (二)练习Y86-64模拟器汇编 (三)基于socket实现daytime(13)服务器和客户端 参考资料 ...