随笔 - 1343, 文章 - 4, 评论 - 397, 阅读 - 426万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Vue模板语法——v-once 数据响应式

Posted on   linFen  阅读(205)  评论(0编辑  收藏  举报

一、数据响应式

  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的值

相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2010-01-28 Oracle中序列表sequence的使用
2010-01-28 JavaScript trim函数大赏 (转)
2010-01-28 全世界最短的IE判定 (转)
点击右上角即可分享
微信分享提示