需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods.

1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vue 实例对象的 methods 属性中, 我们可以直接在 html 中使用它, 注意这里要带括号: inputValueReverse()

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <input type="text" v-model:value="inputValue" />

        <span>{{ inputValueReverse() }}</span>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                inputValue: ''

            },

            methods: {

                inputValueReverse: function () {

                    return this.inputValue.split('').reverse().join('');

                }

            }

        })

    </script>

</body>

</html>

2. 使用 computed, 其效果跟使用 methods 类似, 只是 作用原理 不同, 计算属性 computed 的执行是 惰性 的, 只有它所 依赖缓存 的变量发生了改变, 它才会重新执行, 这是它和 methods 的本质区别, methods 是只要发生 重新渲染 就会执行, 而 computed 不会. 所以我们可以认为 使用 computed 时性能会更好, 但 使用 methods 会更灵活, 所以具体使用哪一个得视情况而定. 另外需要注意的一点是 使用 computed 时是 不需要加括号 的, 如下所示, 它可以像一般变量一样 赤裸裸 地绑定, 而且性能也好, 可以说是很 nice 了.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <input type="text" v-model:value="inputValue" />

        <span>{{ inputValueReverse }}</span>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                inputValue: ''

            },

            computed: {

                // 计算属性的 getter

                inputValueReverse: function () {

                    return this.inputValue.split('').reverse().join('');

                }

            }

        })

    </script>

</body>

</html>

怎样理解 Vue 中的计算属性 computed 和 methods ?的更多相关文章

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

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

  2. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  3. VUE学习之计算属性computed

    计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...

  4. Vue教程：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  5. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  6. [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

    一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...

  7. Vue中的计算属性和监听器（computed 与 watch）

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

  8. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  9. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

随机推荐

  1. redis慢查询笔记

    慢查询 生命周期 两个配置 三个命令 运维经验 生命周期 1.发送命令 2,排队执行命令因为单线程 3.执行命令 4.返回结果 慢查询发生在第三阶段 客户端超时并不一定有慢查询,但慢查询是客户端超时的 ...

  2. Imagetragick 命令执行漏洞（CVE-2016–3714）

    Imagetragick介绍: ImageMagick是一款使用量很广的图片处理程序,很多厂商都调用了这个程序进行图片处理,包括图片的伸缩.切割.水印.格式转换等等.但近来有研究者发现,当用户传入一个 ...

  3. 搬运 centos7.2 apache 绑定二级目录 访问依然是apache页面

    <VirtualHost *:80>ServerName xx.comDocumentRoot /var/www/html/xx</VirtualHost>

  4. HearthBuddy Magnetic 磁力

    https://hearthstone.gamepedia.com/Magnetic Magnetic is an ability exclusive to certain Mech minions ...

  5. ios-动态添加方法，交换方法，重定向方法

    新建一个类Person,Person.h 不写代码,Person.m 有如下两个方法: - (void)eat { NSLog(@"xxx eat===="); } [动态添加方法 ...

  6. 【Taro全实践】6位验证码输入视觉分离（标准下划线分离）

    一.实现的效果图 二.实现思路 中间想过很多实现方法,但是因为input为原生组件的原因,很难适配所有手机直接. 所有如何实现适配所有手机的验证码分离输入呢?(思路如下) 1.input组件为原生组件 ...

  7. substr 字符串截取

    <!DOCTYPE html> <html> <body> <?php echo substr("Hello world",0,10).& ...

  8. php如何开启gd2扩展

    extension=php_gd2.dll 找到php的配置文件php.ini,搜索extension=php_gd2.dll,去掉前面的分号即可:如果没有直接添加这种情况适合于windows系统和编 ...

  9. RabbitMQ 使用参考

    http://www.zouyesheng.com/rabbitmq.html 安装 基本概念 基本形式 持久化 调度策略 5.1. fanout 5.2. direct 5.3. topic 5.4 ...

  10. driver.switch_to.window（driver.window_handles[0]）切换到最新打开窗口

    有时,使用selenium  定位页面元素时,浏览器明明打开的是需要定位的页面,但就是定位不到元素.打印一下元素page_source,会发现源码与页面不同. 主要问题是页面没有加载完成导致,需要设置 ...