初识vue之v-clock和v-text和v-html的区别
v-clock 配合{{ msg }}使用,可以隐藏{{ msg }}<!DOCTYPE html><html lang=“en”><head><meta charset="UTF-8"><title>初识Vue<title&
·
v-clock 配合{{ msg }}使用,可以隐藏{{ msg }}
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8">
<title>初识Vue<title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
[v-clock]{
display:none;
}
</style>
</head>
<body>
<div v-clock id="dv">{{ msg }}</div>
<script>
var vm=new Vue({
el:'dv',
data: {
msg: " 123 "
}
})
</script>
</body>
</html>
v-text 替换内容
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>初识Vue<title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="dv">
<p v-text="msg"></p>
</div>
<script>
var vm=new Vue({
el:'dv',
data: {
msg: " 123 "
}
})
</script>
</body>
</html>
v-html把标签和内容一起添加进去
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8">
<title>初识Vue<title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="dv">
<p v-html="msg"></p>
</div>
<script>
var vm=new Vue({
el:'dv',
data: {
msg: " <h1>你知道我是一个放大字体的标签</h1> "
}
})
</script>
</body>
</html>
v-clock、v-text、v-html的区别
- 不替换整个内容,只替换{{ msg }}占位符里面的内容
- v-clock能够解决插值表达式闪烁的问题
- v-text覆盖元素中原来的整个内容,没有闪烁问题
- v-html可以添加html标签
更多推荐
已为社区贡献1条内容
所有评论(0)