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>