计算属性<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>计算属性</title><script src="./vue-v2.6.10.js"></script> </head> <body><div id="app"><input type="text" v-model="x" > <br><input type="text" v-model="y" > <br><!-- 插值表达式尽可能避免直接运算，性能较低...
vue2中使用中我们也会遇到这样的问题# template <p @click="adda(obj)">{{ obj.a }}</p> <p @click="addb(obj)">{{ obj.b }}</p># srcript data () {return {obj:{a:1}} }, mounted () {this.obj.b = 1; }, methods: {addb(item){item.b += 1;console.log(this.obj.b)},adda(item){item.a += 1;} }我们发现点击obj.a是响应式, 页面也会更新 而新增的obj.b点击则不会 因为vue2使用的Object.defineproperty无法监听到新增的对象属性...