分针网——每日分享：Vue计算属性

最新推荐文章于 2021-12-07 18:43:05 发布
最新推荐文章于 2021-12-07 18:43:05 发布
阅读量304 收藏
点赞数
文章标签： vue 实例
什么是vue计算属性？

个人理解：就是说这个属性是一个函数的返回值。函数的返回值作为一个属性。比如下面例子中的这个 reversedMessage属性。以及这个site属性，都属于计算属性。

这个site属性设置注意下。里面有个set属性。不需要这个的话直接 

  
  

   
     computed
   
   : 
   
   {
  
  

  
  
    
   
   // 计算属性的 getter
  
  

  
  

   
       site
   
   : 
   
   function 
   
   (
   
   ) 
   
   {
  
  

  
  
      
   
   // `this` 指向 vm 实例
  
  

  
  
      
   
   return 
   
   this
   
   .name 
  
  

  
  
    
   
   }

就ok了

为啥要有计算属性？

如下是一个模板，模板的特点就是应该简单，可这模板看起来有点复杂。 

  
  

   
   <div id="example">
  
  

  
  
  
   
   <p>Original message: "{{ message }}"
   
   </p>
  
  

  
  
  
   
   <p>Computed reversed message: "{{ reversedMessage }}"
   
   </p>
  
  

  
  

   
   </div>

改造一下.其实就是computed属性里面放了一个函数。函数的返回值用于改变html的内容，就这么简单。但是模板看起来简单了。 

  
  

   
   <div id="app">
  
  

  
  
  
   
   <p>原始字符串: {{ message }}
   
   </p>
  
  

  
  
  
   
   <p>计算后反转字符串: {{ reversedMessage }}
   
   </p>
  
  

  
  

   
   </div>
  
  

  
  

  
  

   
   <script>
   
   
  
  

  
  

   
   var vm 
   
   = 
   
   new 
   
   Vue
   
   (
   
   {
  
  

  
  

   
     el
   
   : 
   
   '#app'
   
   ,
  
  

  
  

   
     data
   
   : 
   
   {
  
  

  
  

   
       message
   
   : 
   
   'doubi'
  
  

  
  
  
   
   }
   
   ,
  
  

  
  

   
     computed
   
   : 
   
   {
  
  

  
  
    
   
   // 计算属性的 getter
  
  

  
  

   
       reversedMessage
   
   : 
   
   function 
   
   (
   
   ) 
   
   {
  
  

  
  
      
   
   // `this` 指向 vm 实例
  
  

  
  
      
   
   return 
   
   this
   
   .message
   
   .
   
   split
   
   (
   
   ''
   
   )
   
   .
   
   reverse
   
   (
   
   )
   
   .
   
   join
   
   (
   
   ''
   
   )
  
  

  
  
    
   
   }
  
  

  
  
  
   
   }
  
  

  
  

   
   }
   
   )
  
  

  
  

   
   vm
   
   .message
   
   =
   
   "banana"
   
   //用于改变message
  
  

  
  

   
   </script>

上述性质也可以在控制台查看，如图


get和 set属性 

  
  

   
   <!DOCTYPE html>
  
  

  
  

   
   <html>
  
  

  
  

   
   <head>
  
  

  
  

   
   <meta charset="utf-8">
  
  

  
  

   
   <title>Vue 测试实例 - 菜鸟教程(runoob.com)
   
   </title>
  
  

  
  

   
   <script src="https://unpkg.com/vue/dist/vue.js">
   
   
   
   </script>
  
  

  
  

   
   </head>
  
  

  
  

   
   <body>
  
  

  
  

   
   <div id="app">
  
  

  
  
  
   
   <p>{{ site }}
   
   </p>
  
  

  
  

   
   </div>
  
  

  
  

  
  

   
   <script>
   
   
  
  

  
  

   
   var vm 
   
   = 
   
   new 
   
   Vue
   
   (
   
   {
  
  

  
  

   
     el
   
   : 
   
   '#app'
   
   ,
  
  

  
  

   
     data
   
   : 
   
   {
  
  

  
  

   
       name
   
   : 
   
   'Google'
   
   ,
  
  

  
  

   
       url
   
   : 
   
   'http://www.google.com'
  
  

  
  
  
   
   }
   
   ,
  
  

  
  

   
     computed
   
   : 
   
   {
  
  

  
  

   
       site
   
   : 
   
   {
  
  

  
  
      
   
   // getter
  
  

  
  
      
   
   get
   
   : 
   
   function 
   
   (
   
   ) 
   
   {
  
  

  
  
        
   
   return 
   
   this
   
   .name 
   
   + 
   
   ' ' 
   
   + 
   
   this
   
   .url
  
  

  
  
      
   
   }
   
   ,
  
  

  
  
      
   
   // setter
  
  

  
  
      
   
   set
   
   : 
   
   function 
   
   (newValue
   
   ) 
   
   {
  
  

  
  
        
   
   var names 
   
   = newValue
   
   .
   
   split
   
   (
   
   ' '
   
   )
  
  

  
  
        
   
   this
   
   .name 
   
   = names
   
   [
   
   0
   
   ]
  
  

  
  
        
   
   this
   
   .url 
   
   = names
   
   [names
   
   .length 
   
   - 
   
   1
   
   ]
  
  

  
  
      
   
   }
  
  

  
  
    
   
   }
  
  

  
  
  
   
   }
  
  

  
  

   
   }
   
   )
  
  

  
  

  
  

   
   </script>
  
  

  
  

   
   </body>
  
  

  
  

   
   </html>

如上代码会输出


也就说时候只有get的内容被输出了。
现在再在script最后加上如下代码 

  
  

   
   vm
   
   .site 
   
   = 
   
   '菜鸟教程 http://www.runoob.com'
   
   ;
  
  

  
  

   
   document
   
   .
   
   write
   
   (
   
   'name: ' 
   
   + vm
   
   .name
   
   )
   
   ;
  
  

  
  

   
   document
   
   .
   
   write
   
   (
   
   '<br>'
   
   )
   
   ;
  
  

  
  

   
   document
   
   .
   
   write
   
   (
   
   'url: ' 
   
   + vm
   
   .url
   
   )
   
   ;

结果是



本文转自：http://www.f-z.cn/id/279

分针网
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分针网——每日分享：HTML5新增标签 + 智能表单
分针网
06-29 605
更多文章：www.f-z.cn 一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来包裹文档中文章. :用来表示与页面主内容
关于分针网
分针网
05-03 899
分针网是一个提供免费IT技能学习的网站，意在引领IT教育市场变革，致力于服务每一位渴望学习IT技能的学员，为其提供一个系统化，专业化的学习平台。我们提供五大免费服务：免费的系统化教程、免费的实战项目场景、免费的公开课、免费的学习社区、免费的云笔记平台，同时提供导师1对1的特色服务来实现营收：1对1辅导学员学习中的重点难点、1对1指导学员的代码规划和项目实战、1对1帮学员解决工作中的难题，让大家享受
分针网—每日分享：JavaScript-Ajax
分针网
06-08 218
http://www.f-z.cn/id/220 一、服务器搭建(php+apache) http://www.php100.com/html/plugin/ser/2013/0905/91.html 二、什么是Ajax(阿贾克斯) Asynchronous JavaSc
5.Vue计算属性
喜糖
07-27 107
一、计算属性和方法的区别 1.1 计算属性 计算属性本质上是包含getter和setter的方法，当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。 计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。 1.2 方法 方法没有缓存，每次调用方法都会导致重新执行。 方法的参数不限。 1.3 总结 由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，
分针网——每日分享：页面滚动到底部自动加载
分针网
06-26 255
加入职业技能圈 q群：272292492 更多文章：www.f-z.cn 直接代码： $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeig
关闭Vue计算属性自带的缓存功能方法
08-27
在Vue.js框架中，计算属性（Computed Properties）是一种强大的特性，它允许开发者基于组件的数据（data）或其他计算属性来创建动态的、响应式的属性。计算属性的默认行为是缓存结果，即只有当其依赖的任何数据变化...
vue-async-computed：Vue.js的异步计算属性
02-06
使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
vue计算属性及使用详解
08-27
Vue 计算属性使用详解 计算属性是 Vue 中一种非常重要的概念，它可以帮助开发者更好地处理模板中的逻辑运算。下面是关于 Vue 计算属性的详细解释和使用方法。 什么是计算属性 计算属性是指在模板中使用的表达式...
vue 计算属性 vue2.xxx
12-20
computed 计算属性使用
Vue计算属性的使用
08-29
Vue计算属性的使用 本篇文章主要介绍了Vue计算属性的使用。 Vue计算属性是 Vue 框架中的一种特殊属性，它可以根据其他数据属性动态计算出一个新的值。下面将详细介绍 Vue 计算属性的使用。 一、计算属性概述 计算...
分针网—每日分享：如何写一手漂亮的 Vue
分针网
05-12 643
欲先利其器，必先利其器，这是此博客一大倡导；关于如何优雅地去写好 Vue，工具自是首当其冲要提及的，毕竟这非常重要；在你选择使用 Vue 来从事前端开发的那一刻，你已经同意的这一论点：毕竟 Vue 也是用原生 Js 写的，Js 则是用 C 语言写，而 C 又是汇编写的..... 这不再是刀耕火种的年代，而你也未用汇编或 C 来解决你的需求，So，你是同意的。既是赞同的，岂有不用好它的道理？那么来一
javaSctipt 核心
weixin_45554114的博客
11-09 191
（一）js基础语法 1.html+css:w3c 2.ECMA :javascript 行为：动，谁动，网页（html+css）,浏览器 ECMAscript ES ES3 ES4 ES5 ES6 ES7 ES8… 3.写什么？ （1）弹出框：alert(“hello world”) （2）打印信息(DOM)：document.write(“hello world”) （3）打印信息(浏览器控制台...
VUE 学习（四）计算属性computed
qq_43434300的博客
08-26 174
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue学习-计算属性</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--计算属性关键词: .
Vue计算属性
秋殇阁
07-16 1044
计算属性就是当其所依赖的属性的值发生变化的时候，这个属性的值会自动更新，与之相关的东西也会自己更新。计算属性可以完成各种复杂的逻辑，但是最终都要返回一个结果。计算属性可以依赖多个vue实例的数据，只要其中一个发生变化，计算属性就会重新调用，相应的视图也会随之进行更新。 下面我们看个实例： &lt;template&gt; &lt;div id="computed"&gt; &lt;...
Vue计算属性，这是我听过最好的讲解
小可桢的博客
12-07 646
1.计算属性的用途 在了解并使用过计算属性之后，我觉得使用起来其实并不难，关键是你要怎们去理解计算属性的用途，这个才是最关键的 计算属性可以用在购物车订单上，比如你在淘宝上买了很多商品，购物车上最终要结算的价格其实就是计算属性的结果。你买两件，结算的总金额就自动×2，并显示在你手机上 这个就是它的用途 2.计算属性是什么 本质上是一个 function 函数，实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM结果 时使用。 咱们场景再现一下，你正在逛
Vue.js学习笔记（三）：计算属性
喜狼狼与灰太杨的博客
08-04 169
计算属性关键词: computed 我们看一个反转字符串的例子： <div id="app"> {{ message.split('').reverse().join('') }} </div> 这里模板变的很复杂起来，也不容易看懂理解。 接下来我们看看使用了计算属性的实例： <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage
计算属性 computed
qq_42634562的博客
12-15 119
计算属性 computed 计算缓存 vs Methods Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}" js 复制代码 var vm = new Vue({ el: ‘#example’, data: { message: ‘Hello’ }, computed...
分针网—每日分享：代码如何看起来干净
分针网
06-09 344
http://www.f-z.cn/id/222 页面规范 如何让代码更加规范? 可以从以下几个方面入手 文件规范 注释规范 命名规范 书写规范 其他规范 文件规范 文件分类
PPO算法，即Proximal Policy Optimization（近端策略优化）.pdf
最新发布
08-05
PPO算法，即Proximal Policy Optimization（近端策略优化），是一种在强化学习领域中广泛应用的策略梯度方法。由OpenAI在2017年提出，PPO旨在解决传统策略梯度方法中策略更新过大导致的训练不稳定问题。它通过引入限制策略更新范围的机制，在保证收敛性的同时提高了算法的稳定性和效率。 一、PPO算法简介 PPO算法的核心思想是通过优化一个特定的目标函数来更新策略，但在这个过程中严格限制策略变化的幅度。具体来说，PPO引入了裁剪（Clipping）和信赖域（Trust Region）的概念，以确保策略在更新过程中不会偏离太远，从而保持训练的稳定性。 二、PPO算法的主要变体 PPO算法主要有两种变体：裁剪版（Clipped PPO）和信赖域版（Adaptive KL Penalty PPO）。其中，裁剪版PPO更为常见，它通过裁剪概率比率来限制策略更新的幅度，而信赖域版PPO则使用KL散度作为约束条件，并通过自适应调整惩罚系数来保持策略的稳定更新。PPO算法，即Proximal Policy Optimization（近端策略优化），是一种在强化学习领域中广
Vue.js深入浅出：computed计算属性详解
"本文将深入探讨Vue.js框架中的computed计算属性，它是前端开发中的一个重要概念，用于处理基于响应式数据的动态计算。" 在前端开发中，Vue.js 是一款非常流行的JavaScript库，它提供了丰富的特性来帮助开发者构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值