4.v-once指令

最新推荐文章于 2024-03-10 15:23:04 发布

code_dream_wq

最新推荐文章于 2024-03-10 15:23:04 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue学习

本文链接：https://blog.youkuaiyun.com/code_dream_wq/article/details/110137956

vue学习专栏收录该内容

40 篇文章

订阅专栏

- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
 <!-- 即data里面定义了info 后期我们修改了 仍然显示的是第一次info里面存储的数据即 nihao  -->
    <div v-once>{{info}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        info: 'nihao'
      }
    });
  </script>
</body>
</html>