Vue学习笔记29--v-once

v-once

v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。

首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

v-once 指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。

用法如下：<span v-once>{{ data }}</span>

示例如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-text|v-html</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="app">
    <p v-once>v-once初始化：{{msg}}</p>
    <!-- msg不会改变 -->
    <p>插值语法：{{msg}}</p>
    <input type="text" v-model="msg" name="" />
  </div>

  <script type="text/javascript">
    let vm = new Vue({
      el: "#app",
      data: {
        msg: "Hello v-once",
      },
    });
  </script>
</body>

</html>

posted on 2024-03-01 11:38 sunwugang 阅读(47) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告