v-bind 和 {{}} 的区别？答案

【问题标题】：Difference between v-bind and {{}}?v-bind 和 {{}} 的区别？
【发布时间】：2016-04-01 17:54:46
【问题描述】：

我有一个输入字段，其中的值字段被传递一个存储在 Vuex 中的字符串。输入字段更改被去抖动，新字符串同步到 Vuex。

像:value="vuexState.myString这样绑定时，打字时光标跳到行尾。

当像这样value={{vuexState.myString}} 绑定时，光标停留在原处。

根据指南：http://vuejs.org/guide/syntax.html#Arguments 这两个应该是相同的，{{ }} 样式在内部被转换为:bind。这可能是一个错误吗？

我的理论是光标跳跃的发生是因为 vuex 状态更改重新渲染输入，并且 {{ }} 样式仅插入一次，而绑定语法在每次更改时重新渲染输入。

我目前正在使用value={{vuexState.myString}}，但我想知道发生了什么，或者是否有更好的方法来做到这一点。

【问题讨论】：

标签： vue.js

【解决方案1】：

它在关于 Interpolation 的文档中并且已被弃用（参见。Migration guit from 1.x）

这是老办法

<div class="btn btn-primary hint--top {{class}}"></div>

改用 Javascript 表达式：

<div v-bind:class="'btn btn-success hint--top '+ class "></div>

【讨论】：

【解决方案2】：

看看控制台，它似乎已被弃用，取而代之的是冒号语法或v-bind：

vue.js:2237 [Vue warn]: foo="{{foo}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.

【讨论】：

【解决方案3】：

v-text:'something' === {{something}}

【讨论】：