Vuejs 将 HTML 转换为纯文本

Question

我想使用 vuejs 将 HTML 转换为纯文本。

<ol>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>

我使用了v-html，但这会将 HTML 字符串解析为如下所示的 HTML

 1. The quick brown fox jumps over the lazy dog
 2. The quick brown fox jumps over the lazy dog 
 3. The quick brown fox jumps over the lazy dog
 4. The quick brown fox jumps over the lazy dog

但我希望结果是这样的。

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog

我可以使用 angularjs 或 javascript 来完成此操作，但使用 vuejs 找不到任何东西

注意：我没有在我的项目中使用jquery。

Answer 1

自定义指令呢

Vue.directive('plaintext', {
  bind(el, binding, vnode) {
    el.innerHTML = el.innerText;
    //el.innerHTML = el.innerHTML.replace(/<[^>]+>/gm, '');
  }
});

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">

  <ol v-plaintext>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
  </ol>
</div>

Answer 2

尝试从 css 转换

var vm = new Vue({
  el: '#vue-instance',
  data: {
    html: `<ol>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>` 
  }
});

ol{
  list-style: none;
}
ol li{
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <div v-html="html"></div>
</div>

另一种使用隐藏div的方式

var vm = new Vue({
  el: '#vue-instance',
  computed:{
    newHTML: function(){
      document.querySelector("#temp").innerHTML = this.html;
      var textContent = document.querySelector("#temp").textContent;
      document.querySelector("#temp").innerHTML = "";
      return textContent;
    }
  },
  data: {
    html: `<ol>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>`
  }
});

.hide{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <div>{{newHTML}}</div>
</div>
<div class="hide" id='temp'>123</div>