（7）打鸡儿教你Vue.js

以你之姓@ 2021-09-20 13:44 297阅读 0赞

计算属性  
computed

<div id="app">
      {
       { message.split('').reverse().join('') }}
    </div>

计算属性的实例：

<div id="app">
      <p>{
       { message }}</p>
      <p>{
       { reversedMessage }}</p>
    </div>
     
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'dashu!'
      },
      computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
    </script>

methods: {
      reversedMessage2: function () {
        return this.message.split('').reverse().join('')
      }
    }

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]
          }
        }
      }
    })

computer 属性“依赖缓存”的概念  
method 的概念

有缓存，不会发生改变，于是界面渲染就直接用这个值，不再重复执行代码

没有缓存，只要用一次，函数代码就执行一次

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[1240]: /images/20210724/f1dc537e4a924d5a9de53812ce6c8036.png
[1240 1]: /images/20210724/3e4401e501264499b663a7ccab425e4e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关（20）打鸡儿教你Vue.js

vue-cli 快速创建工程，工程化项目目录 ![image.png][] ![image.png][image.png 1] ![image.png][image.p

「爱情、让人受尽委屈。」/ 2021年09月29日 05:00/ 0 赞/ 200 阅读

相关（12）打鸡儿教你Vue.js

组件语法格式如下： Vue.component(tagName, options) <tagName></tagName> <div

小鱼儿/ 2021年09月20日 13:50/ 0 赞/ 352 阅读

相关（11）打鸡儿教你Vue.js

表单 v-model 指令在表单控件元素上创建双向数据绑定 ![image][] <div id="app"> <p>单个复选框：</p>

「爱情、让人受尽委屈。」/ 2021年09月20日 13:50/ 0 赞/ 173 阅读

相关（10）打鸡儿教你Vue.js

事件处理器 <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p

客官°小女子只卖身不卖艺/ 2021年09月20日 13:48/ 0 赞/ 199 阅读

相关（8）打鸡儿教你Vue.js

监听属性监听属性 watch 通过 watch 来响应数据的变化 <div id = "app"> <p style = "font-size

╰半夏微凉°/ 2021年09月20日 13:46/ 0 赞/ 269 阅读

相关（7）打鸡儿教你Vue.js

计算属性 computed <div id="app"> { { message.split('').reverse().join(''

以你之姓@/ 2021年09月20日 13:44/ 0 赞/ 298 阅读

相关（5）打鸡儿教你Vue.js

条件与循环条件判断使用 v-if 指令 <p v-if="seen"> <template v-if="ok"> <script> ne

我不是女神ヾ/ 2021年09月20日 13:42/ 0 赞/ 194 阅读

相关（3）打鸡儿教你Vue.js

vue.js是一套构建用户界面的渐进式框架 vue关注视图层，采用自底向上增量开发的设计 <div id="app"> <p>{ { me

落日映苍穹つ/ 2021年09月20日 13:34/ 0 赞/ 233 阅读

相关（2）打鸡儿教你Vue.js

var obj = {} Object.defineProperty(obj, 'msg', { // 设置 obj.msg = "1" 时set方

女爷i/ 2021年09月20日 12:40/ 0 赞/ 334 阅读

相关（1）打鸡儿教你Vue.js

当今世界不会Vue.js，前端必定路难走一个JavaScript MVVM库以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaSc

柔情只为你懂/ 2021年09月20日 10:22/ 0 赞/ 223 阅读