首页 > Web开发 > 详细

Vue.js系列之四计算属性和观察者

时间:2017-11-17 20:44:29      阅读:234      评论:0      收藏:0      [点我收藏+]

一、计算属性

1、模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码:

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

在这个地方,模版不在是简单的声明式逻辑,你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,当你想要在模版中多次引用此处的翻转字符串时,就会更加难以处理.

所以,任何复杂逻辑,你都应当使用计算属性,基础例子如下:

<body>
    <div id="currentPage">
        <p>Original message:"{{message }}"</p>
        <p>Computed reversed message:"{{reversedMessage }}"</p>
    </div>
</body>
<script type="text/javascript">
    var currPage=new Vue({
        el:"#currentPage",
        data:{
            message:"https://www.baidu.com"
        },
        computed:{
            reversedMessage:function () {
                return this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    });
</script>

技术分享图片

2、计算属性缓存vs方法

上面的功能通过方法也可以实现,但是通过方法和计算属性实现相同的功能是有区别的,虽然两种计算方式的最终结果完全相同.

 

Vue.js系列之四计算属性和观察者

原文:http://www.cnblogs.com/GreenLeaves/p/7853244.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!