一、mustache插值表达式
即两个大括号（{{}}），在标签元素内容中使用，传入变量，显示Vue对象data中的值。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式显示data中内容 -->
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
浏览器显示
二、v-cloak
网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标签会自动消失变回显示。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak，解决插值表达式的闪烁问题 -->
<p v-cloak>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
三、v-text
和插值表达式相似，渲染标签内容。
初始标签内没内容，不会出现插值表达式的闪烁问题。
v-test对应的数据会完全覆盖标签中的内容；插值表达式只会替换自己的占位符，其他内容不变。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>++++{{ msg }}----</p> <!-- 闪烁问题；内容只会替换插值表达式，其他不变 -->
<p v-text="msg">++++----</p> <!-- 无闪烁问题；内容会全部覆盖标签中内容 -->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
四、v-html
v-html对应的数据会完全覆盖标签中的内容，但会把对饮数据当作html解析到页面上，而插值表达式和v-text只会把数据当作普通文本加载到页面上。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>我是一个html标签！</h1>'
}
})
</script>
</body>
</html>
网友评论