Tampilkan HTML yang tidak terhapus di Vue.js

191

Bagaimana saya bisa mengatur agar interpretasi HTML di dalam ikatan kumis? Saat ini break ( <br />) baru saja ditampilkan / lolos.

Aplikasi Vue kecil:

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  }
    ]
  }
})

Dan inilah templatnya:

<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 Mike
sumber
1
melakukan HTML yang tidak terhapuskan untuk jeda baris terlalu banyak, hanya ingin menyebutkan itu! ini adalah risiko keamanan besar
Ryan Taylor

Jawaban:

203

Dimulai dengan Vue2, kawat gigi tiga sudah usang, Anda harus menggunakan v-html.

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

Tidak jelas dari tautan dokumentasi tentang apa yang seharusnya kita tempatkan di dalamnya v-html, variabel Anda masuk ke dalam v-html.

Juga, v-html hanya bekerja dengan <div>atau <span>tetapi tidak dengan <template>.

Jika Anda ingin melihat ini secara langsung di aplikasi, klik di sini .

thethitetulip
sumber
1
"tetapi tidak dengan <template>" adalah bagian penting di sini jika Anda berasal dari Angular.js dan mencari sesuatu seperti<ng-include>
domih
236

Anda dapat menggunakan direktif v-html untuk menampilkannya. seperti ini:

<td v-html="desc"></td>
王 开朗
sumber
3
Yang itu benar-benar berfungsi di vue2. Pertama mengetuk kompilasi.
Yauheni Prakopchyk
1
saya punya masalah dengan v-html untuk membatasi teks ,? apakah mungkin membatasi teks dalam v-html? saya mencoba, itu gagal
Zum Dummi
86

Anda dapat membacanya di sini

Jika Anda menggunakan

{{<br />}}

itu akan lolos. Jika Anda ingin html mentah, Anda harus menggunakannya

{{{<br />}}}

EDIT (5 Feb 2017): Seperti yang ditunjukkan oleh @hitautodestruct, pada vue 2 Anda harus menggunakan v-html alih - alih kawat gigi tiga keriting.

zeratulmdq
sumber
1
Ya, itu bahkan dalam dokumen. Terima kasih.
Mike
60
Harap dicatat bahwa di vue 2.0 kumis tiga telah usang Anda harus menggunakan v-html sebagai gantinya.
hitautodestruct
5

Vue dikirimkan secara default dengan arahan v-html untuk menunjukkannya, Anda ikat ke elemen itu sendiri daripada menggunakan kumis normal yang mengikat untuk variabel string.

Jadi untuk contoh spesifik Anda, Anda perlu:

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

sumber
4

Anda harus menggunakan arahan v-html untuk menampilkan konten html di dalam komponen vue

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