Vue.js में Unescaped HTML प्रदर्शित करें

190

मूंछ बंधन के अंदर HTML की व्याख्या करने के लिए मैं कैसे प्रबंधन कर सकता हूं? फिलहाल ब्रेक ( <br />) सिर्फ प्रदर्शित / बच गया है।

छोटा Vue ऐप:

var logapp = new Vue({
  el: '#logapp',
  data: {
    title: 'Logs',
    logs: [
      { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  },
      { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  }
    ]
  }
})

और यहाँ टेम्पलेट है:

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td>{{fail}}</td>
                <td>{{type}}</td>
                <td>{{description}}</td>
                <td>{{stamp}}</td>
                <td>{{id}}</td>
            </tr>
        </tbody>
    </table>
</div>

javascript html vue.js

— माइक
स्रोत

1

लाइन-ब्रेक के लिए unescaped HTML करना ओवरकिल है, बस इसका उल्लेख करना चाहता था! यह एक बड़ा सुरक्षा जोखिम है

— रयान टेलर

202

Vue2 के साथ शुरू, ट्रिपल ब्रेसरों को पदावनत किया गया था, आप का उपयोग करना है v-html।

<div v-html="task.html_content"> </div>

यह दस्तावेज़ीकरण लिंक से स्पष्ट नहीं है कि हम अंदर क्या करने वाले हैं v-html, आपके चर अंदर जाते हैं v-html।

इसके अलावा, v-htmlकेवल <div>या <span>नहीं के साथ काम करता है <template>।

अगर आप किसी ऐप में इसे लाइव देखना चाहते हैं, तो यहां क्लिक करें ।

— thewhitetulip
स्रोत

1

"लेकिन साथ नहीं <template>" यहाँ महत्वपूर्ण हिस्सा है अगर आप Angular.js से आते हैं और कुछ इस तरह की तलाश करते हैं<ng-include>

— domih

236

आप इसे दिखाने के लिए निर्देश v-html का उपयोग कर सकते हैं। इस तरह:

<td v-html="desc"></td>

— 王开朗
स्रोत

3

वह वास्तव में v2 में काम करता है। पहले एक संकलन पर चड्डी।

— योहानी प्रकोपचेक

1

मेरे पास पाठ को सीमित करने के लिए v-html की समस्या है? क्या v-html में पाठ को सीमित करना संभव है? मैंने कोशिश की, यह विफल रहा

— झूम दमामी

86

आप यहाँ पढ़ सकते हैं

यदि तुम प्रयोग करते हो

{{<br />}}

यह बच जाएगा। यदि आप कच्चे HTML चाहते हैं, तो आप उपयोग करेंगे

{{{<br />}}}

EDIT (5 फरवरी 2017): जैसा कि @hitautodestruct बताते हैं, vue 2 में आपको ट्रिपल कर्ली ब्रेसेस के बजाय v-html का उपयोग करना चाहिए ।

— zeratulmdq
स्रोत

1

हाँ, यह भी में अपने। धन्यवाद।

— माइक

60

कृपया ध्यान दें कि vue 2.0 में ट्रिपल मूंछों को हटा दिया गया है, आपको इसके बजाय v-html का उपयोग करना चाहिए ।

— १२

5

इसे दिखाने के लिए v-html निर्देश के साथ डिफ़ॉल्ट जहाजों द्वारा Vue, आप स्ट्रिंग चर के लिए सामान्य मूंछें बंधन का उपयोग करने के बजाय इसे स्वयं तत्व पर बांधते हैं।

तो आपके विशिष्ट उदाहरण के लिए आपको इसकी आवश्यकता होगी:

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td v-html="fail"></td>
                <td v-html="type"></td>
                <td v-html="description"></td>
                <td v-html="stamp"></td>
                <td v-html="id"></td>
            </tr>
        </tbody>
    </table>
</div>

4

Vue घटक के अंदर html सामग्री प्रदर्शित करने के लिए आपको v-html निर्देश का उपयोग करना होगा

<div v-html="html content data property"></div>

— शायर हैदर
स्रोत