<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<!-- 插值表达式在遇到网络慢的情况下，
会有闪烁问题，会在页面上显式`{{message}}` ，
之后渲染完毕之后才会填充值。需要注意：
最好把浏览器缓存清理下再测试。
v-cloak解决插值表达式闪烁问题 -->
<!-- <div id="myDiv" v-cloak>{{message}}</div> -->
<!-- v-text指令和插值表达式一样,都可以实现数据绑定 -->
<!-- <div id="myDiv" v-text="message"></div> -->
<!-- `v-text`指令没有闪烁问题。
`v-text`指令会覆盖元素中原有的内容；
插值表达式只会替换自己的占位符，
并不会把标签体中的内容清空。 -->
<div id="myDiv">
<!-- <div>{{message}}</div>
<div v-text="message"></div>
<div v-html="message"></div> -->
<!--v-once指令 被该指令所修饰，只会渲染一次 -->
<h1>{{message}}</h1>
<h2 v-once>{{message}}</h2>
<h3>{{message=66666}}</h3>
<!-- 修改了message的值，会发现v-once指令修饰的内容不会发生改变 -->
<!-- v-pre将内容原封不动的显示出来，不要做解析处理 -->
<h1 v-pre>{{message}}</h1>
<!-- v-show -->
<h1 v-show="isShow">{{message}}</h1>
<!--相当于是添加了一个display：none的样式 -->
<h1 v-show="noShow">{{message}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const app = new Vue({
el: "#myDiv",
data: {
message: "码农HelloWorld+666",
isShow: true,
noShow: false,
},
});
</script>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
