在以一篇文章中,可能文章特别长,但是在页面第一次显示的时候可能就只需要显示一部分,这种情况下就需要自己进行修改

基本思路

利用类名就是预先定义一个类名,设置高度,和overflow:hidden,前提:这是一个单独的盒子

例如

.con-art{
height: 280px;
overflow: hidden;
}

在类名利用动态类名进行控制

例如

<span @click='seeAll' v-if='article.content.length>600'>{{seeall?'查看全文':'收起'}}</span>
 <div :class="{'con-art':seeall}">
{{article.content}}
</div>

在span元素上定义一个事件,点击的时候进行对seeall的布尔值进行取反

 seeAll(){
this.seeall=!this.seeall
},

单击的时候进行对seeall的布尔值进行操作,然后今儿对div的类名进行操作

vue中文章的折叠于显示全部的更多相关文章

  1. wordpress中文章发布时间不显示?用get_the_date代替the_date

    今天发现,在主题中部分地方使用the_date函数来显示文章发布的时间时,竟然发生不显示时间的情况,再仔细看了一下这些文章,有些都是经过几次修改和保存的,可能是由于the_date只是显示文章第一次发 ...

  2. vue中v-show和v-if在显示和隐藏元素上的区别

    v-show将元素隐藏是在dom节点上加style='display:none' v-if是直接将元素完全去掉 拿v-show示例,(v-if 也是一样,把下面的代码中v-show替换成v-if即可运 ...

  3. vue中鼠标移入字体下面显示颜色并改变字体颜色的问题

    <template> <div class="smart_nav" :class="{'fixedTop':fixedTop}"> &l ...

  4. Vue中动态(import 、require)显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

  5. vue slot插槽v-show不控制显示隐藏

    vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.

  6. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  7. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  8. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

  9. vue中显示原网页代码--codemirror

    在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...

随机推荐

  1. Java03-Java语法基础(二)运算符

    Java语法基础(二)运算符 一.运算符 1.算数运算符:+.-.*./.% 1)双目运算符:二元运算符,参加运算的对象有两个(+.-.*./.%) 2)单目运算符:一元运算符,参加运算的对象只有一个 ...

  2. ubuntu 安装Pangolin 过程

    Pangolin 是一款开源的OPENGL显示库,可以用来视频显示.而且开发容易. 代码我们可以从Github 进行下载:https://github.com/zzx2GH/Pangolin.git ...

  3. vi/vim 按键说明

    转自:http://www.runoob.com/linux/linux-vim.html vi/vim 按键说明 除了上面简易范例的 i, Esc, :wq 之外,其实 vim 还有非常多的按键可以 ...

  4. Excel上传找到错误数据类型

    一:查询数据库表中字段的类型语句 SELECT CASE WHEN col.colorder = 1 THEN obj.name ELSE '' END AS 表名, col.colorder AS ...

  5. Oracle_PL/SQL(7) 集合

    pl/sql集合处理单行单列数据,可以使用标量变量:处理单行多列的数据,可以使用pl/sql记录(%rowtype,record):处理单列多行数据,可以使用pl/sql集合. pl/sql集合类型是 ...

  6. Numpy array 合并

    1.np.vstack() :垂直合并 >>> import numpy as np >>> A = np.array([1,1,1]) >>> ...

  7. 如何选择稳定的PHP虚拟主机?

    先评估自己的业务量有多大如果是新站且流量和数据量都不大的话,建议刚开始先购买低配的即可,待流量逐渐增大时在逐渐升级,灵活又省钱 带宽的限制 虚拟主机带宽是指同一时间内所能承载的数据的能力,直接关系大虚 ...

  8. 洛谷1993 小K的农场

    原题链接 裸的差分约束. \(X_a-X_b\geqslant C\) \(X_a-X_b\leqslant C\Rightarrow X_b-X_a\geqslant -C\) \(X_a-X_b\ ...

  9. JoyOI1035 棋盘覆盖

    原题链接 对棋盘染色,坐标和为奇数的染黑,偶数为白.这时会发现对于相同颜色的格子,是无法放置骨牌的,这样我们就将所有格子分成两类,然后根据能否放置骨牌连边,最后就是求二分图最大匹配了. 这里我是用的匈 ...

  10. BZOJ1079或洛谷2476 [SCOI2008]着色方案

    一道记忆化搜索 BZOJ原题链接 洛谷原题链接 发现对于能涂木块数量一样的颜色在本质上是一样的,所以可以直接压在一个状态,而这题的数据很小,直接暴力开\(6\)维. 定义\(f[a][b][c][d] ...