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

世上无难事,只畏有心人。有心之人,即立志之坚午也,志坚则不畏事之不成。

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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  阅读(10)  评论(0编辑  收藏  举报