Vue计算属性

最新推荐文章于 2024-02-01 06:20:39 发布

bruobuqi

最新推荐文章于 2024-02-01 06:20:39 发布

阅读量643

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/bruobuqi/article/details/79045962

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

计算属性：

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。

如果需要多于一个表达式的逻辑，应当使用计算属性。

1.基础例子

<div id=“demo"> a = {{ a }}, b = {{ b }} </div>

js:

 var vm = new Vue({
  el: '#demo',
  data: { a: 1 },
  computed: { b: function () { return this.a + 1; }; };
  });

结果：a = 1, b = 2

这里我们声明了一个计算属性b。我们提供的函数将用作属性vm.b的getter。

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

2.计算属性 vs. $watch

Vue.js提供了一个方法$watch，用于观察Vue实例上的数据变动。

$watch这货就是观察一个值的变化，观察的这个值一变化的话，那么就执行function里面的语句。

直接代码：html

<body>
<div id="app">
    firstName:<input type="text" name="li"  v-model="firstName">
    <br>
    lastName:<input type="text" name="fei"  v-model="lastName">
    <p>fullName: {{fullName}}</p>
</div>
</body>

js:

  window.onload = function() {
        new Vue({
            el: '#app',
            data: {
                firstName: 'a',
                lastName: 'fei',
                fullName: 'a fei'
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    }

结果：

3.计算 setter

计算属性默认只是getter，不过在需要时也可以提供一个setter：

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName;
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}

bruobuqi

关注

0
点赞
踩
0

收藏

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

计算属性：在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。如果需要多于一个表达式的逻辑，应当使用计算属性。1.基础例子 a = {{ a }}, b = {{ b }} js: var vm = new Vue({ el: '#demo', data: { a: 1 }, computed: { b: function () { r
复制链接

扫一扫

专栏目录