其实不需要 VUE样式问题可以用 CSS 解决,展开收起只需要切换指定 classname
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;// 限制快级元素的文本行数
overflow: hidden;
如果一定要用Vue，就写个 maxLen控制当前可显示的段落长度
...
{{ content }}
展开>>
<
...
const maxLen = 15;
const app = new Vue({
data: {
haystack: "",
maxLen: maxLen
},
computed: {
content() {
const maxLen = this.maxLen;
const haystack = this.haystack.toString();
return haystack.length > maxLen
? haystack.slice(0, maxLen) + "..."
: haystack;
}
},
methods: {
handleFold(fold) {
this.maxLen = fold ? maxLen : this.haystack.length;
},
getData: function() {
setTimeout(() => {
this.haystack =
"乐视员工获刑4年 11月6日消息，今天下午，海淀法院官网发布案件快报，乐视云计算公司员工闫某，为倒卖流量牟取私利，在职期间受上家吴某的委托在公司的207台服务器上种植木马程序。";
}, 1000);
}
},
mounted() {
this.getData();
}
});
app.$mount("#node");
