1.  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.  <body>
  3.      <div id="app">
  4.          <p>初始值：{{name}}</p>
  5.          <p>翻转值：{{reverseStr()}}</p>
  6.          <p>计算属性翻转值：{{reverse}}</p>
  7.          <button  @click="setSeverseStr()">点击调用set方法</button>
  8.      </div>
  9.      <script type="text/javascript" src="js/jquery.js" ></script>
  10.      <script type="text/javascript" src="js/vue.js" ></script>
  11.      <script>
  12.          let vm=new Vue({
  13.              el:'#app',
  14.              data:{
  15.                  name:'Rose Jack',
  16.                  firstName:'小',
  17.                  lastName:'明'
  18.              },
  19.              methods:{
  20.                  reverseStr(){
  21.                      return this.name.split(' ').reverse().join(' ');
  22.                  },
  23.                  setSeverseStr(){
  24.                      this.reverse='xiao ming';
  25.                  }
  26.              },
  27.              //计算属性
  28.              computed:{
  29.                  reverse:{
  30.                      //get方法
  31.                      get(){
  32.                          //return this.name.split(' ').reverse().join(' ');
  33.                          return this.firstName+' '+this.lastName;
  34.                      },
  35.                      //set方法
  36.                      set(str){
  37.                          let nameArr=str.split(' ');
  38.                          this.firstName=nameArr[];
  39.                          this.lastName=nameArr[];
  40.                          alert(this.firstName);
  41.                          alert(this.lastName);
  42.                      }
  43.                  }
  44.              }
  45.          })
  46.      </script>
  47.  </body>

点击之后：

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

vue中计算属性中的set和get的更多相关文章

  1. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

  2. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

  3. 浅谈Vue中计算属性（computed）和方法（methods）的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  4. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  5. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  6. vue生命周期以及vue的计算属性

    一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...

  7. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  8. vue的计算属性get和set

    1.计算属性是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作. b.对计算属性中的数据进行监视. 2.计算属性和普通属性的区别: a.计算属性是基于它的依赖进行更新的,只有在相关依赖 ...

  9. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

随机推荐

  1. 手机安装fiddler证书

    如果电脑浏览器和手机抓包有证书问题,那就把电脑的证书都删除,然后在fiddler里重置,手机上删除不了单个证书,可以重新下载一个证书安装 如果电脑抓包正常,手机抓包不正常,那就手机重新下载证书安装 手 ...

  2. CPU时间分片、多线程、并发和并行

    1.CPU时间分片.多线程? 如果线程数不多于CPU核心数,会把各个线程都分配一个核心,不需分片,而当线程数多于CPU核心数时才会分片. 2.并发和并行的区别 并发:当有多个线程在操作时,如果系统只有 ...

  3. PowerDesign15连接数据库并反向表结构详细

    10.0 sql2008 11.0 sql2010 这的服务器名称,复制到上面 这里的默认数据库不要改.Powerdesign会把自已的数据也存在默认的数据库里 一般不用改 测试 成功 这里ODBC的 ...

  4. python3下scrapy爬虫(第三卷:初步抓取网页内容之抓取网页里的指定数据）

    上一卷中我们抓取了网页的所有内容,现在我们抓取下网页的图片名称以及连接 现在我再新建个爬虫文件,名称设置为crawler2 做爬虫的朋友应该知道,网页里的数据都是用文本或者块级标签包裹着的,scrap ...

  5. HDU-1403-Longest Common Substring（后缀数组的高度数组运用）

    这题要求两个串中的最长相同子串的长度.高度数组可以求一个串中的最长相同子串的长度.所以想到把两个串连起来,但是这样又会产生一些新的串(第一个串的结尾和第二个串的开头组成的)于是在两个串中间放一个'\0 ...

  6. algorithm-question

    主键都相同,选择排序和插入排序谁快 选择排序:比较N*(N-1)/2,交换0:插入排序:比较N-1,交换0:插入排序更 大专栏  algorithm-question快 逆序数组,插入排序与选择排序 ...

  7. 写个匹配某段html dom代码某属性的正则匹配方法

    private static string GetHtmlDomAttr(string html, string id, string attrname) { string xmatchstring ...

  8. eclipse、myeclipse使用常用的小技巧

    1.修改类名称上的@author  *** Preference----Java----Code Style----Code Templates----->Comments----->Ty ...

  9. Promise 的含义

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...

  10. Jmeter连接mysql成功

    1 下载,mysql-connector-odbc-5.3.4-winx64.msi 进行安装  <转载> 2 安装后, copy "C:\ProgramFiles (x86)\ ...