- v-text 输出渲染后的值
- v-html 输出解析HTML元素后的值
- v-once 只绑定一次
- v-pre 原样输出
- v-cloak 渲染完之后才显示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="msg">
<p v-text="msg">{{msg}}</p>
<h1 v-html="msg">{{msg}}</h1>
<a href="#" v-once>{{msg}}</a> <br>
<a href="#" v-pre>{{msg}}</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"你好"
}
})
</script>
</body>
</html>
v-cloak的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak="msg">{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:"你好"
},
beforeMount:function(){
alert("警告")
}
})
</script>
</body>
</html>
QW.png
防止将{{message}}类似的输出到页面
配合css中display：none 来隐藏标签
点击确定之后页面才会显示值为 你好
网友评论