1set和get:

注意：

  1.   this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题

练习代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="./vue.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <input type="text" v-model="fullName">
  13.         <br>
  14.         firstName:  <input type="text" v-model="firstName"/>
  15.         <br>
  16.         lastName:   <input type="text" v-model="lastName"/>
  17.     </div>
  18.     <script>
  19.         var app=new Vue({
  20.             el:'#app',
  21.             data:{
  22.                 firstName:'Jack',
  23.                 lastName:'Green'
  24.             },
  25.             computed:{
  26.                 fullName:{
  27.                     //getter,用于读取
  28.                     get:function(){
  29.                         return this.firstName+' '+this.lastName;
  30.                     },
  31.                     set:function(newValue){
  32.                         var names=newValue.split(' ');
  33.                         this.firstName=names[0];
  34.                       //  this.lastName=names[1];   这样子在多个连续空格的情况下，lastname消失的
  35.                       this.lastName=names[names.length-1];
  36.                     }
  37.                 }
  38.             }
  39.         })
  40.     </script>
  41. </body>
  42. </html>

计算属性还有两个很实用的小技巧容易被忽略：

　　1计算属性可以依赖其他计算属性。

　　2计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例的数据。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="./vue.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app1">
  12.         {{arr}}
  13.     </div>
  14.     <div id="app2">
  15.         {{reversedTest}}
  16.     </div>
  17.     <script>
  18.         var app1=new Vue({
  19.             el:"#app1",
  20.             data:{
  21.                 text:'123,456'
  22.             },
  23.             computed:{
  24.                 arr:function(){
  25.                    return this.text.split(',').reverse();
  26.                 }
  27.             }
  28.         });
  29.         var app2=new Vue({
  30.             el:"#app2",
  31.             data:{
  32.  
  33.             },
  34.             computed:{
  35.                 reversedTest:function(){
  36.                     return app1.arr.join(',');
  37.                 }
  38.             }
  39.         })
  40.     </script>
  41. </body>
  42. </html>

计算属性缓存：

　　调用methods里的方法也可以与计算属性起到同样的作用。　　

  1.     <div id="app">
  2.         <!-- 注意，这里的reversedText是方法，所以要带() -->
  3.         {{reversedText()}}
  4.     </div>
  5.     <script>
  6.         var app=new Vue({
  7.             el:'#app',
  8.             data:{
  9.                 text:'123,456'
  10.             },
  11.             methods:{
  12.                 reversedText:function(){
  13.                     //这里的this指向的是当前Vue实例
  14.                     return this.text.split(',').reverse().join(',');
  15.                 }
  16.             }
  17.         })
  18.     </script>

　　计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以上例中text只要不改变，计算属性也就不会更新。

  1.       computed:{
  2.             now:funcntion(){
  3.                 return Date.now();
  4.             }
  5.         }

　　这里的Date.now()不是响应式依赖，所以计算属性now不会更新。但是methods则不同，只要重新渲染，它就会被调用，因此函数也会被执行。

　　使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。

vue.js实战——计算属性的更多相关文章

  1. Vue.js：计算属性

    ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...

  2. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  3. Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  4. Vue.js的计算属性

    开始用vue会把所有的模版上的数据都放到data属性里,或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了,后来看到同组的同事在用computed属性,就又去查了一下ap ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  7. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  8. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

随机推荐

  1. 【前端】js中数组对象根据内容查找符合的第一个对象

    今天在写一个混合开发版的app,其中一个功能是扫描快递单号,客户要求不能扫描重复的快递单号!所有就验证查出. 首先实现思路就是: 1.定义一个全局数组变量:var nubList = []; 2.进入 ...

  2. 【Unity】微软的一款依赖注入组件

    前言 前面学习了autofac这个依赖注入组件,本来是打算写在一起的,因为这个组件没打算像autofac一样详细的写,只是写下以前自己鼓捣玩搭建框架然后使用的一个依赖注入组件,并且也是进行了封装使用. ...

  3. 解决基于IIS的.net core HttpWebRequest 连接特别慢

    用的是HttpWebRequest 连接特别慢,查找原因发现 : 由 HttpWebRequest. Proxy  代理的原因导致 . 其实请求1秒就完成了,那15秒是用来等待默认proxy超时的…… ...

  4. response.writeHead

    response.writeHead(statusCode[, statusMessage][, headers]) 查看英文版 版本历史 statusCode <number> stat ...

  5. markdown写作方法规范参考汇总

    目录 markdown写作方法 markdown规范 补 本文转载自:https://blog.csdn.net/xiaogeldx/article/details/89208074 本文总结了自己的 ...

  6. 阿里巴巴AI Lab成立两年，都做了些什么？

    https://mp.weixin.qq.com/s/trkCGvpW6aCgnFwLxrGmvQ 撰稿 & 整理|Debra 编辑|Debra 导读:在 2018 云栖人工智能峰会上,阿里巴 ...

  7. Django Linux环境下部署CentOS7+Python3+Django+uWSGI+Nginx(含Nginx返回400问题处理、防火墙管理)

    本文将介绍如何在Linux系统上部署Django web项目,本次部署基于下面的架构: CentOS7+ Python3.5 + Django1.11 + uWSGI + Nginx 亲测可行!!按照 ...

  8. C# 批量插入数据方法

    批量插入数据方法 void InsertTwo(List<CourseArrangeInfo> dtF) { Stopwatch watch = new Stopwatch(); watc ...

  9. NSTimer 不工作 不调用方法

    比如,定义一个NSTimer来隔一会调用某个方法,但这时你在拖动textVIew不放手,主线程就被占用了.timer的监听方法就不调用,直到你松手,这时把timer加到 runloop里,就相当于告诉 ...

  10. 微信小程序测试方法总结

    最近的新项目是小程序加web端后台管理 主要找了些文章方便自己使用也分享给大家: 小程序官方文档 https://developers.weixin.qq.com/miniprogram/design ...