vue怎么根據(jù)字符串長度控制顯示的字數(shù)超出顯示省略號...

如下圖，之前用css樣式做了這樣的效果，但是我這里有個展開的按鈕，需要根據(jù)一些判斷顯示展開按鈕，我用的是vue所以就想著用vue來做效果，但是vue的話也是剛接觸不久，不知道該怎么實現(xiàn)，在此請教，謝過。

改用vue，代碼修改：

css:

html:

我這樣做的話，單條來是可以實現(xiàn)，但是如果是多條數(shù)據(jù)的話，當點擊展開或者收起，就是所有的朋友圈數(shù)據(jù)都一起操作了，該怎么該呢？？在此謝過

經(jīng)過多方大佬解答，自己選了這么做。代碼如下：

在后臺的返回數(shù)據(jù)里，每一條添加一個屬性

回答

編輯回答

哎呦喂

:class="{'unfold':isUnfold}"
unfold是你展開的樣式
通過控制isUnfold的 true false 來控制展開還是不展開

2017年9月10日 07:11

編輯回答

下墜

css里面設(shè)置 width + overflow + text-overflow + white-space ，就可以實現(xiàn)啊

2018年7月2日 03:30

編輯回答

初念

你可以加個filter函數(shù)，對data里面的數(shù)據(jù)進行過濾，當超過一定值的時候就截斷再加上...

2017年9月30日 19:56

編輯回答

朕略傻

其實不需要 VUE樣式問題可以用 CSS 解決,展開收起只需要切換指定 classname

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;// 限制快級元素的文本行數(shù)
overflow: hidden;

在線 demo

如果一定要用Vue，就寫個 maxLen控制當前可顯示的段落長度

    ...
    <div id="node">
      {{ content }}
      <span @click='handleFold(false)' v-show="maxLen  != haystack.length">
        展開>>
      </span>
      <span @click='handleFold(true)' v-show="maxLen  == haystack.length">
        <<收起
      </span>
    </div>    
    ...

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日消息，今天下午，海淀法院官網(wǎng)發(fā)布案件快報，樂視云計算公司員工閆某，為倒賣流量牟取私利，在職期間受上家吳某的委托在公司的207臺服務(wù)器上種植木馬程序。";
      }, 1000);
    }
  },
  mounted() {
    this.getData();
  }
});
app.$mount("#node");

在線 demo

2017年11月19日 02:44

編輯回答