v-bind 和 {{}} 的区别? [英] Difference between v-bind and {{}}?
问题描述
我有一个输入字段,其中的值字段被传递一个存储在 Vuex 中的字符串.输入字段的变化被去抖动,新的字符串同步到 Vuex.
I have an input field with the value field being passed a string stored in Vuex. The input fields changes are debounced and the new string synced to Vuex.
当像这样绑定:value="vuexState.myString
时,输入时,光标跳到行尾.
When bound like this :value="vuexState.myString
, when typing, the cursor jumps to the end of the line.
当这样绑定 value={{vuexState.myString}}
时,光标停留在它所在的位置.
When bound like this value={{vuexState.myString}}
, the cursor stays where it is.
根据指南:http://vuejs.org/guide/syntax.html#Arguments这两个应该是一样的,{{}}
样式在内部转换为 :bind
.这可能是一个错误吗?
According to the guide: http://vuejs.org/guide/syntax.html#Arguments
These two should be the same, with the {{ }}
style being internally converted to :bind
. Could this be a bug?
我的理论是,光标跳转发生是因为 vuex 状态更改重新渲染输入,并且 {{ }}
样式仅插入一次,而绑定语法每隔改变.
My theory is that the cursor jumping occurs because the vuex state change re-renders the input and that the {{ }}
style is interpolated only once while the binding syntax re-renders the input every change.
我目前正在使用 value={{vuexState.myString}}
但我想知道发生了什么或者是否有更好的方法来做到这一点.
I am currently using value={{vuexState.myString}}
but I'd like to know what is happening or if there is a better way to do this.
推荐答案
在Interpolation 并且已被弃用(参见.Migration guit来自 1.x)
It's in the documentation about Interpolation and has been deprecated (see. Migration guit from 1.x)
这是老方法
<div class="btn btn-primary hint--top {{class}}"></div>
解决方案
改用 Javascript 表达式:
Solution
Use Javascript expression instead:
<div v-bind:class="'btn btn-success hint--top '+ class "></div>
这篇关于v-bind 和 {{}} 的区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!