如何傳遞Vue中的字符串並將其視爲html

我試圖使用以下代碼傳遞exp的值。但是，selectedChannel.explanation的形式是「< b>頻道名稱</b>」。我如何才能將exp顯示爲頻道名稱？如何傳遞Vue中的字符串並將其視爲html

computed: { 
    channel: { 
     get() { 
      const selectedChannel = this.$store.getters.selectedChannel; 
      return selectedChannel ? selectedChannel.explanation : ''; 
     }

下面是部分模板

<div class="channels"> 
     <textarea 
     v-model="channel"> 
     </textarea> 
</div>

來源

2017-03-07 Abishek Puri

你可以創建一個小提琴，你是否得到y錯誤？ – Saurabh

給輸入標籤（也textarea的）任何價值會視爲string。
要在textarea標籤顯示頻道名稱，你可以做到這一點

computed: { 
    channel: { 
     get() { 
      const selectedChannel = this.$store.getters.selectedChannel; 
      // using regex to match the text between "b" tag 
      const channelName = selectedChannel.match("<b\b[^>]*>(.*?)<\/b>")[1]; 
      return selectedChannel ? `<textarea>${channelName}</textarea>` : ''; 
     }

模板：

<div class="channels" v-html="channel"> 
</div>

來源

2017-03-07 09:11:31

感謝這對我工作！ :) –

我認爲你正在尋找的「V-HTML」指令

來源

2017-03-07 05:59:21 Austio

我試着將v-model改爲v-html，但是它仍然沒有顯示它的方式，它仍然顯示了大膽的標籤 –

你可以搭起一個jsfiddle，很可能你沒有向v-html傳遞一個字符串，但是可能是別的東西。 – Austio

您需要使用V-HTML指令：

<div class="channels" v-html="channel"> 
</div>

樣品小提琴here

來源

2017-03-07 19:09:08 Gus

嘿，我敢肯定這會拋出編譯錯誤。這在語法上是錯誤的。這是舊Vue.js版本的一個特性嗎？ –

你說得對，我不知道這個功能在Vue 2中被刪除了.v-html是要走的路。我編輯了我的答案。 – Gus

如何傳遞Vue中的字符串並將其視爲html

回答

相關問題