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

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>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/82796158