vue中文章的折叠于显示全部
在以一篇文章中,可能文章特别长,但是在页面第一次显示的时候可能就只需要显示一部分,这种情况下就需要自己进行修改
基本思路
利用类名就是预先定义一个类名,设置高度,和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中文章的折叠于显示全部的更多相关文章
- wordpress中文章发布时间不显示?用get_the_date代替the_date
今天发现,在主题中部分地方使用the_date函数来显示文章发布的时间时,竟然发生不显示时间的情况,再仔细看了一下这些文章,有些都是经过几次修改和保存的,可能是由于the_date只是显示文章第一次发 ...
- vue中v-show和v-if在显示和隐藏元素上的区别
v-show将元素隐藏是在dom节点上加style='display:none' v-if是直接将元素完全去掉 拿v-show示例,(v-if 也是一样,把下面的代码中v-show替换成v-if即可运 ...
- vue中鼠标移入字体下面显示颜色并改变字体颜色的问题
<template> <div class="smart_nav" :class="{'fixedTop':fixedTop}"> &l ...
- Vue中动态(import 、require)显示img图片
vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...
- vue slot插槽v-show不控制显示隐藏
vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...
- 当Vue中img的src是动态渲染时不显示问题
最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...
- vue中显示原网页代码--codemirror
在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...
随机推荐
- 【剑指offer】题目二
//实现一个函数:把字符串中的每个空格替换成"%20".例如输入"We are happy."则输出"We%20are%20happy." ...
- easyui datagrid 表格不让选中(双层嵌套)
代码: function local(role,region,ip){ $("#roleList").datagrid({ // title:'服务器监控列表', height:( ...
- 有关defer和async的区别
关于async.defer功能及异同的介绍 async属性会让js并行加载,并在js加载完成后立即执行,也就是说执行顺序由加载速度定,而不是html中的先后顺序 defer属性js同样会并行加载,而执 ...
- 单击Gridview中LinkButton,获取当前行索引及某单元格值,进行相关处理
1.在Gridview中添加模板列,在其中加入Linkbuttion,增加CommandName属性 (设置命令名),并赋值 <asp:TemplateField HeaderText=&quo ...
- 微信公众号开发(5)---使用开源组件开发公众号OAuth2.0网页授权授权登录
搞清微信公众号授权登录的步骤步骤,我们的开发就完成了一大步 献上github 地址: https://github.com/Wechat-Group/weixin-java-tools/wiki/MP ...
- 9.13 h5日记
9.13 面试题 为什么两个P出此案的效果不同,原因是 浏览器在解析第二个P的时候,因为字母没有空格,浏览器会认为这个单词没有打完,所以不会换行. 列表 ul ol dl li 1.无序列表 ul ( ...
- 使用clear来清除localStorage保存对象的全部数据
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Eigen解线性方程组
一. 矩阵分解: 矩阵分解 (decomposition, factorization)是将矩阵拆解为数个矩阵的乘积,可分为三角分解.满秩分解.QR分解.Jordan分解和SVD(奇异值)分解等,常见 ...
- 异常检测(Anomaly Detection)
十五.异常检测(Anomaly Detection) 15.1 问题的动机 参考文档: 15 - 1 - Problem Motivation (8 min).mkv 在接下来的一系列视频中,我将向大 ...
- iOS常用代码总结
1.读取图片NSString *path = [[NSBundle mainBundle] pathForResource"icon" ofType"png"] ...