WEB前端
  1. Vue
    1. WEB前端 - Vue - 安装
    2. WEB前端 - Vue - webpack目录结构与第一个项目示例
    3. WEB前端 - Vue - 基础语法
    4. WEB前端 - Vue - 条件语句与循环语句
    5. WEB前端 - Vue - 函数与计算属性
    6. WEB前端 - Vue - 监听属性
    7. WEB前端 - Vue - 样式绑定
    8. WEB前端 - Vue - 表单
    9. WEB前端 - Vue - 组件详解
    10. WEB前端 - Vue - 路由
    11. WEB前端 - Vue - 生命周期钩子函数

WEB前端 - Vue - 函数与计算属性

程序员日记      2019-09-11

函数:methods

计算属性: computed。


示例

<template>
  <div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>方法示例,反转字符串: {{ reversedMessage2() }}</p>
    <p>计算属性示例,反转字符串: {{ reversedMessage }}</p>
    <p>测试computed的set和get: {{ test() }}</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
   return {
      name:"日记",
      url:"https://yy-tao.com",
      message:"!!!界世好你",
    }
  },
  methods:{
    reversedMessage2:function(){
      return this.message.split('').reverse().join('');
    },
    test:function(){
      this.site = "程序员日记 http://www.yy-tao.com";
      document.write('name: ' + this.name);
      document.write('<br>');
      document.write('url: ' + this.url);
    }
  },
  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]
        }
    },
    reversedMessage:function(){
      return this.message.split('').reverse().join('');
    }
  },
 
};
</script>

说明

1.计算属性 reversedMessage 依赖于 message,在 message 发生改变时,reversedMessage 也会更新。

2.函数与计算属性的区别是:

computed 是基于它的依赖缓存,比如上诉例子message,只有message发生改变才会重新取值

methods 函数的话,则是在重新渲染的时候,总会重新调用执行

3.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter