computed计算属性使用过后，双向绑定失效解决办法

<div id="app"> <input type="text" v-model="val" /> <span>{{val}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el : "#app", computed : { "val" : function() { return "123"; } } }); console.log(vm.val); vm.$val = "11111"; </script>

分析：不出来的原因是因为只有get没有set
解决办法1：
加入data，因为data里面有劫持方法本身带有get和set方法，因为vue是通过Object.defineProperty()来实现数据劫持的。

        data: function() {
            return {
                inputValue: '123' } }, computed : { spanValue : function() { return this.inputValue + '.00'; } }
解决方法2：

    computed: {
        _foo: {
            set: function(value) {
                this.foo = value; }, get: function() { return this.foo } } }

原理：

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
 
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

转载于:https://www.cnblogs.com/cainiao-vcu/p/8317872.html