vue的.sync修饰符可以用表达式吗？为什么？

Answer 1

带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

Answer 2

先看看 vue 最终生成的 render 函数：

<div>
  <input v-bind:name.sync="name + 1">
</div>

vue 会把上面的模板生成为：

function render() {
  with(this) {
    return _c('div', [_c('input', {
      attrs: {
        "name": name + 1
      },
      on: {
        "update:name": function ($event) {
          name + 1 = $event
        }
      }
    })])
  }
}

看到这里就明白了，使用表达式会产生一条错误的语句：

name + 1 = $event
// Uncaught SyntaxError: Invalid left-hand side in assignment