Vue——v-once指令的用法——2020.11.14

最新推荐文章于 2023-03-19 20:07:46 发布

Blockchain_KT

最新推荐文章于 2023-03-19 20:07:46 发布

阅读量622

点赞数 1

分类专栏： Vue.js-实战开发文章标签： vue js css3 html5 v-once

本文链接：https://blog.csdn.net/weixin_43402353/article/details/109686552

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

一丶v-once

该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

二丶代码实战

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/14 9:17-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <h2 v-once>{{message}}</h2>
  <h2>{{message}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!"
    }
  })
</script>
</body>
</html>

三丶运行结果

在这里插入图片描述

四丶Console修改message值

在这里插入图片描述

优惠劵

Blockchain_KT

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue——v-once指令的用法——2020.11.14

一丶v-once该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次，不会随着数据的改变而改变二丶实战代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫