Exibir HTML sem escape no Vue.js

189

Como posso conseguir que o HTML seja interpretado dentro de uma ligação de bigode? No momento, o intervalo ( <br />) é apenas exibido / escapado.

Aplicativo Vue pequeno:

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

E aqui está o modelo:

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

1

fazer HTML sem escape para quebras de linha é um exagero, só queria mencionar isso! é um grande risco à segurança

Ryan Taylor

201

Começando com o Vue2, as chaves triplas foram descontinuadas, você deve usar v-html.

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

Não está claro no link da documentação o que devemos colocar dentro v-html, suas variáveis vão para dentro v-html.

Além disso, v-htmlfunciona apenas com <div>ou <span>não <template>.

Se você quiser ver isso ao vivo em um aplicativo, clique aqui .

thewhitetulip
fonte

1

"mas não com <template>" é a parte importante aqui se você vem de angularjs e olhar para algo como<ng-include>

domih

235

Você pode usar a diretiva v-html para mostrá-la. como isso:

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

王开朗
fonte

3

Aquele realmente funciona no vue2. O primeiro é a compilação.

Yauheni Prakopchyk 14/09/16

1

Eu tenho um problema com o v-html para limitar o texto? é possível limitar o texto em v-html? eu tentei, foi falhou

Zum Dummi

86

Você pode ler isso aqui

Se você usar

{{<br />}}

será escapado. Se você quiser html bruto, precisará usar

{{{<br />}}}

EDIT (5 de fevereiro de 2017): Como aponta o @hitautodestruct, no vue 2 você deve usar v-html em vez de chaves triplas.

zeratulmdq
fonte

1

Sim, é mesmo no docu. Obrigado.

Mike

60

Observe que no vue 2.0 o bigode triplo foi preterido, você deve usar o v-html .

Htautodestruct 23/08/16

5

Por padrão, o Vue é fornecido com a diretiva v-html para mostrá-lo; você o vincula ao próprio elemento, em vez de usar a ligação bigode normal para variáveis de string.

Portanto, para o seu exemplo específico, você precisaria:

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

fonte

4

Você precisa usar a diretiva v-html para exibir o conteúdo html dentro de um componente vue

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

Shair Haider
fonte

Exibir HTML sem escape no Vue.js

Respostas: