Vue.js 计算属性

最新推荐文章于 2024-05-31 05:33:12 发布

随枫潜入夜

最新推荐文章于 2024-05-31 05:33:12 发布

阅读量238

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42243957/article/details/107889641

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：
在这里插入图片描述

计算属性的实例：

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
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]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '百度 http://www.baidu.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

在这里插入图片描述

从实例运行结果看在运行 vm.site = ‘百度 http://www.baidu.com’; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

其他：
1、
在这里插入图片描述

2、当你没有使用到计算属性的依赖缓存的时候，可以使用定义方法来代替计算属性，在 methods 里定义一个方法可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。

3、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>

    <body>
        <div class="test">    <!--computed计算属性-->
            <p>{{now}}</p>
            <p>{{now}}</p>
            <p>{{now}}</p>
            <p>{{now}}</p>
            <hr />            <!--横线分割-->
</div>
        <div class="test2">   <!--methods方法，注意new（）加了括号-->
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</p>
        </div>
    </body>

    <script type="text/javascript">
        var myVue = new Vue({
            el: ".test",
            computed: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {     //延时
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        });
        var vue2 = new Vue({
            el: '.test2',
            methods: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        })
    </script>

</html>

在这里插入图片描述

随枫潜入夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：计算属性的实例：可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 </title><script src="ht
复制链接

扫一扫

专栏目录