Vue.js এ অপরিশোধিত এইচটিএমএল প্রদর্শন করুন

Question

আমি কীভাবে এইচটিএমএলকে গোঁফের বাঁধাইয়ের অভ্যন্তরে ব্যাখ্যা করতে পারি? এই মুহুর্তে বিরতি ( <br />) সবেমাত্র প্রদর্শিত / পালানো হয়।

ছোট ভ্যু অ্যাপ:

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>

Comments

লাইন ব্রেকগুলির জন্য আনসকেপড এইচটিএমএল করা ওভারকিল, কেবল এটি উল্লেখ করতে চেয়েছিলেন! এটি একটি বড় সুরক্ষা ঝুঁকি

— রায়ান টেলর

Answer 1

Vue2 দিয়ে শুরু করে, ট্রিপল ধনুর্বন্ধনীগুলি হ্রাস করা হয়েছে, আপনি ব্যবহার করতে পারেন v-html।

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

আমাদের ভিতরে কী রাখার কথা , ডকুমেন্টেশন লিঙ্ক থেকে এটি স্পষ্ট নয় যে v-htmlআপনার ভেরিয়েবলগুলি ভিতরে যায় v-html।

এছাড়াও, v-htmlশুধুমাত্র সাথে <div>বা <span>না সাথে কাজ করে <template>।

আপনি যদি এই অ্যাপটিতে সরাসরি দেখতে চান তবে এখানে ক্লিক করুন ।

Comments

"তবে এর সাথে নয় <template>" এখানে গুরুত্বপূর্ণ অংশটি যদি আপনি Angular.js থেকে এসে কিছু এমন সন্ধান করেন<ng-include>

— ডমিহ

Answer 2

আপনি এটি প্রদর্শনের জন্য নির্দেশিকা ভি-এইচটিএমএল ব্যবহার করতে পারেন। এটার মত:

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

Comments

এটি আসলে vue2 এ কাজ করে। সংকলনের জন্য প্রথম এক।

— ইয়াউহেনী প্রকোপাচাইক

টেক্সট সীমাবদ্ধ করতে আমার ভি-এইচটিএমএল নিয়ে সমস্যা আছে,? ভি-এইচটিএমএল এ পাঠ্য সীমাবদ্ধ করা সম্ভব? আমি চেষ্টা করেছি, এটি ব্যর্থ হয়েছিল

— জুম ড্মি

Answer 3

আপনি এখানে যে পড়তে পারেন

আপনি যদি ব্যবহার

{{<br />}}

এটা পালাতে হবে। আপনি যদি কাঁচা এইচটিএমএল চান, আপনি ব্যবহার করতে হবে

{{{<br />}}}

সম্পাদনা (ফেব্রুয়ারী 5 2017): @ হাইটাডোডস্ট্রাক্ট হিসাবে উল্লেখ করা হয়েছে যে, ভ্যূ 2 তে আপনার ট্রিপল কোঁকড়া ধনুর্বন্ধনীগুলির পরিবর্তে ভি-এইচটিএমএল ব্যবহার করা উচিত ।

Comments

হ্যাঁ, এটি এমনকি নথিতেও। ধন্যবাদ।

— মাইকে

দয়া করে নোট করুন যে 2.0 এর পরিবর্তে ট্রিপল গোঁফ অবনতি হয়েছে আপনার পরিবর্তে ভি-এইচটিএমএল ব্যবহার করা উচিত ।

— হাইটাটোডস্ট্রাক্ট

Answer 4

এটি দেখানোর জন্য ভি-এইচটিএমএল নির্দেশের সাথে ডিফল্ট জাহাজ অনুসারে আপনি স্ট্রিং ভেরিয়েবলের জন্য সাধারণ গোঁফের বাঁধাই ব্যবহার না করে নিজেই এটি উপাদানটিতে আবদ্ধ হন।

সুতরাং আপনার নির্দিষ্ট উদাহরণের জন্য আপনার প্রয়োজন হবে:

<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>

Answer 5

কোনও মান উপাদানর ভিতরে এইচটিএমএল সামগ্রী প্রদর্শন করার জন্য আপনাকে ভি-এইচটিএমএল নির্দেশিকা ব্যবহার করতে হবে

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