vue怎么根據(jù)字符串長(zhǎng)度控制顯示的字?jǐn)?shù)超出顯示省略號(hào)...

:class="{'unfold':isUnfold}"
unfold是你展開(kāi)的樣式
通過(guò)控制isUnfold的 true false 來(lái) 控制展開(kāi)還是不展開(kāi)

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

你可以加個(gè)filter函數(shù)，對(duì)data里面的數(shù)據(jù)進(jìn)行過(guò)濾，當(dāng)超過(guò)一定值的時(shí)候就截?cái)嘣偌由?..

其實(shí)不需要 VUE樣式問(wèn)題可以用 CSS 解決,展開(kāi)收起只需要切換指定 classname

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

在線 demo

如果一定要用Vue，就寫(xiě)個(gè) maxLen控制當(dāng)前可顯示的段落長(zhǎng)度

    ...
    <div id="node">
      {{ content }}
      <span @click='handleFold(false)' v-show="maxLen  != haystack.length">
        展開(kāi)>>
      </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 =
          "樂(lè)視員工獲刑4年 11月6日消息，今天下午，海淀法院官網(wǎng)發(fā)布案件快報(bào)，樂(lè)視云計(jì)算公司員工閆某，為倒賣(mài)流量牟取私利，在職期間受上家吳某的委托在公司的207臺(tái)服務(wù)器上種植木馬程序。";
      }, 1000);
    }
  },
  mounted() {
    this.getData();
  }
});
app.$mount("#node");

在線 demo

學(xué)習(xí)vue，對(duì)比原生的javascript，思維需要從DOM操作轉(zhuǎn)變成“數(shù)據(jù)驅(qū)動(dòng)的思想”

像上面的例子，首先應(yīng)該有個(gè)div在最后面，只不過(guò)v-show="false"，監(jiān)控字符長(zhǎng)度（或其他條件），來(lái)將v-show置為true，另外，div上應(yīng)有一個(gè)點(diǎn)擊事件，能夠?qū)⑵渲脼閒alse?？傊侵苯硬僮鲾?shù)據(jù)，而不是DOM

請(qǐng)問(wèn)有移動(dòng)端的demo嗎

這個(gè)用css可以實(shí)現(xiàn)的。