【前端框架学习】v-clock、v-html、v-text的使用
·
1.v-clock
使用v-clock能够解决插值表达式闪烁的问题
css代码
<style>
[v-clock] {
display: none;
}
</style>
页面代码
<div id="app">
<!-- 使用v-clock能够解决插值表达式闪烁的问题-->
<p v-clock>{{message}}</p>
</div>
2.v-text
实现与插值表达式区别不大,v-text默认是没有闪烁问题的;插值表达式的前后可以放任意内容,v-text会覆盖元素中原本的内容,插值表达式只会替换自己的占位符,不会把整个元素内容清空。
页面代码
<div id="app">
<h4 v-text="message"></h4>
</div>
3.v-html
v-html会覆盖元素中原本的内容,但是会把message中的值当做html代码输出。
页面代码
<div id="app">
<p v-html="message2"></p>
</div>
js代码
<script>
var vm = new Vue({
el: "#app",
data: {
message2: '<h1>big</h1>'
}
});
</script>
更多推荐
所有评论(0)