插值表达式闪烁问题——v-clock，v-html，v-text

最新推荐文章于 2024-06-27 22:42:30 发布

何迟

最新推荐文章于 2024-06-27 22:42:30 发布

阅读量2.5k

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82796158

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-clock]{
            display: none;
        }
        /*任何没有加载好的，都不直接显示插值表达式*/
    </style>
</head>
<body>
      <div id="app">
          <p v-clock>-----{{ msg }}-----</p>
          <!--指定插值不闪烁的控件-->
          <h4 v-text="msg">--------</h4>
          <!--默认v-text 是没有闪烁问题的，会覆盖标签的元素中原本的内容，插值表达式只会替换占位符的内容，不会覆盖原来的内容-->
          
          <div>{{msg2}}</div>
          <div v-text="msg2"></div>
          <div v-html="msg2"></div>
          <!--v-text将得到的内容当作文本解析，而v-html将得到的内容当作html解析-->
      </div>
      
      <script src="../lib/vue.js"></script>

      <script>
          var vm = new Vue({
              el:'#app',
              data:{
                  msg:'456',
                  msg2:'<h2>陈小帅是我，没错</h2>'
              }
          })
      </script>
</body>
</html>

效果：