惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
MongoDB | Blog
MongoDB | Blog
Google DeepMind News
Google DeepMind News
M
MIT News - Artificial intelligence
D
Docker
云风的 BLOG
云风的 BLOG
B
Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
G
Google Developers Blog
GbyAI
GbyAI
T
Tailwind CSS Blog
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
V
Visual Studio Blog
C
Check Point Blog
I
InfoQ
Microsoft Azure Blog
Microsoft Azure Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
阮一峰的网络日志
阮一峰的网络日志
小众软件
小众软件
N
Netflix TechBlog - Medium
B
Blog RSS Feed
腾讯CDC
aimingoo的专栏
aimingoo的专栏

博客园 - linFen

Ubuntu下使用ProcDump ubuntu 20.04 搭建 ProcDump Anaconda 常用命令 记录codesmith 断点调试弹不了vs Vue模板语法——键盘事件修饰符 Vue模板语法——事件修饰符 Vue模板语法——v-on 事件绑定 Vue模板语法——v-model 双向数据绑定 Vue模板语法——数据绑定指令 Vue模板语法——v-cloak vue响应性原理 ES6其他 css其他 JS其他 前端VUE 前端 vue 中slot Vue 之 Mixins (混入) Vue 响应性
Vue模板语法——v-once 数据响应式
linFen · 2024-01-28 · via 博客园 - linFen

一、数据响应式

  1. 如何理解响应式

    • html5中的响应式:屏幕尺寸的变化导致样式的变化
    • 数据的响应式:数据的变化导致页面内容的变化
  2. 什么是数据绑定

    数据绑定:将数据填充到标签中

  3. v-once只编译一次

    显示内容之后不再具有响应式功能

二、v-once指令

  1. v-once 应用场景

    如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能。

  2. v-once用法

    在需填充的标签中添加v-once指令

  3. 例如

      <div id='app'>
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         var vm =new Vue({
               el:'#app',
               data:{
                  msg:'HelloWorld',
                  info:'Vue是真得好!!!'
               }
         })
      </script>

结果:
在浏览器控制台中,可通过vm.msg=***改变msg的值,而不能使用vm.info=***来修改info的值