Existem vários métodos de renderização de dados e instruções relacionadas no Vue. A seguir, serão apresentados um por um:
Primeiro, a expressão de interpolação
As expressões de interpolação são agrupadas em dois colchetes {{}} e os atributos dos atributos são definidos na instância do Vue:
as instruções fornecidas pelo Vue podem renderizar facilmente os dados na página sem operar manualmente o elemento DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
</body>
</html>
Como a sintaxe da expressão de interpolação é {{}}, ela também é chamada de expressão de bigode e bigode.
Segundo, v-clock
A expressão interpolada tem um problema de cintilação.
Quando a expressão interpolada é carregada no caso de uma placa de velocidade de rede, a página exibe {{xxx}}. O conteúdo será exibido quando a página for carregada, o que afeta a aparência.
No momento, o atributo v-cloak pode ser adicionado para resolver o problema da expressão interpolada {{}} cintilante
<div id="app">
<!-- 解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
</div>
Em seguida, adicione um estilo css ao v-clock:
<style>
[v-cloak]
{
display: none;
}
</style>
Dessa forma, no caso de uma placa de velocidade de rede, a expressão de interpolação não será exibida e será ocultada pela exibição: none. Quando a página é carregada, o conteúdo é exibido diretamente.
Três, v-text
O efeito das expressões de texto v e {{}} de interpolação são quase todos os dados de exibição
<div id="app">
<h4 v-text="msg"></h4>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
A diferença entre o texto v e as expressões de interpolação é: o
texto v não possui um problema de oscilação
porque não está escrito na expressão, mas é adicionado ao atributo
Mas a expressão de interpolação também tem suas vantagens: a
expressão de interpolação pode adicionar qualquer conteúdo antes e depois :
por exemplo:
<p v-cloak>---{{msg}}---</p>
Como a expressão de interpolação substituirá apenas seu próprio espaço reservado e não afetará outro conteúdo, o
v-text cobrirá o conteúdo original do elemento
Quatro, v-html
Se você deseja processar a tag HTML v-text, ela não funcionará porque o v-text não escapa às tags HTML
.
Você precisa usar o v-html neste momento :
o atributo th: utext semelhante ao Thymeleaf escapará das tags Html
<!-- v-html可以转义html标签 -->
<div v-html="msg"></div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
