<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak>{
{
msg }}</p> <!-- 插值表达式 -->
<h2 v-text = "msg"></h2> <!-- 指令插值 -->
</div>
<div v-html="msg2"></div> <!-- 把内容以HTML的格式输出 -->
<script src="../vueDemo/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'Vue!',
msg2:'<h1>哈哈</h1>'
}
});
</script>
</body>
</html>
插值表达式:{
{ msg }},在元素前后添加内容可以被解析并显示出来,但是会存在表达式闪烁的问题,v-cloak可以解决这个问题。
指令插值:v-text,在元素前后添加内容会被指令的内容覆盖,不存在插值表达式闪烁的问题。
插值表达式{
{ msg }}和v-text都不能解析html标签。
v-html:也是一个插值指令,类似于v-text,可以解析html标签。