Vue 2属性插值: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
Vue 2在组件模板上使用双大括号{{}}对属性赋值:
<div id="{{ item.id }}"></div>
报语法错误:
Vue template syntax error:
id="{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
原因是vue 2.x是不支持对属性使用插值{{}}的方式赋值,需使用v-bind指令或者v-bind的简写冒号“:”来指定属性。
v-bind指令
v-bind:id="item.id"
v-bind简写指令:
:id="item.id"
可以在指令表达式使用javascript,如拼接字符串my-和item.id
:id="'my-'+item.id"
ES6可以表示为:
:id="`my-${item.id}`"