【前端框架学习】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>