v-once与v-html与v-text与v-pre与v-cloak_v-html重复触发-CSDN博客

本文链接：https://blog.csdn.net/weixin_54327001/article/details/127469893

1.v-once

只会在第一次展示数据，如果想继续改变，不会跟着改变，不太常用

2.v-html

3.v-text

如果添加文本，不会显示，只会显示v-text的，一般不用，用mustache更多

4.v-pre

比如单纯就是想显示{{message}}不希望被解析

5.v-cloak

因为设置了时间，如果不加v-cloak会看到没有渲染的{{message}}

如果加了v-cloak直到渲染完毕才会显示出来，否则就是display none，从而代替mustache的显示

v-cloak也不是很常用

因为模板会被渲染成函数，到时候使用的是虚拟dom

mustache

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
<h2>{{message}},学习vue</h2>
  <h2>{{firstClass+"与"+secondClass}}</h2>
  <h2>{{firstClass}}  {{secondClass}}</h2>
  <h2>{{counter*2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"努力学习啊",
          firstClass:"汇编",
          secondClass:"计算机系统",
          counter:100
        },
  })
</script>

</body>

v-once

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>  {{message}}</h2>
  <h2  v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        }
  })
</script>

</body>
</html>

v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          url:"<a href='http://www.baidu.com'>百度一下</a>"
        }
  })
</script>

</body>
</html>

v-text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}，晚上好</h2>
  <h2 v-text="message">,晚上好</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        }
  })
</script>

</body>
</html>

v-pre

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        }
  })
</script>

</body>
</html>

~~v-cloak（待修改~~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]
    {
      display: none;
    }
  </style>
</head>
<body>

<!--vue解析前，div有属性v-clock-->
<!--解析后没这个属性，就可以展示出来效果了-->
<div id="app">
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  setTimeout(function ()
  {
    const app=new Vue({
      el:"#app",
      data://注意此处的花括号
          {
            message:"这是一个vue模板"
          }
    })
    },1000)//1s后渲染出来


</script>

</body>
</html>