v-once

最新推荐文章于 2021-09-16 22:44:29 发布

zmj2051176726

最新推荐文章于 2021-09-16 22:44:29 发布

阅读量136

点赞数

分类专栏： vue指令

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/100094607

版权

vue指令专栏收录该内容

8 篇文章 0 订阅

订阅专栏

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>原始值：{{msg}}</p>
    <p>后来值：{{msg}}</p>
    <input type="text" v-model="msg">
</div>
</body>
<script>
    var vm=new Vue({
       el:"#app",
       data:{
           msg:"wo"
       }
    })
</script>
</html>

结果如下：
在这里插入图片描述
输入框输入什么，原始值和后来值都跟着变，想要原始值不变，则添加v-once即可。

<p v-once>原始值：{{msg}}</p>
<p>后来值：{{msg}}</p>
<input type="text" v-model="msg">

结果如下：
在这里插入图片描述
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

zmj2051176726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-once

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。例如：<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../...
复制链接

扫一扫

专栏目录