一、使用插值表达式 存在内容闪烁问题,但是 v-text 指令 没有闪烁问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<h3>{{ mass }}</h3>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#box',
data: {
mass: "你好VUE",
}
})
</script>
</body>
</html>
那怎么解决闪烁的问题呢?
我们可以使用 v-cloak 来解决闪烁的问题,并给设置样式为 display: none; 就可以了
二、插值表达式只会插入内容,并不会清除其余的内容,而 v-text 会把元素中之前的内容 全部清空掉!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none ;
}
</style>
</head>
<body>
<div id="box">
<h3 v-cloak>-------{{ mass }}=====</h3>
<hr>
<h2 v-text="mass" v-cloak>你会不会换掉我</h2>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#box',
data: {
mass: "你好VUE",
}
})
</script>
</body>
</html>