如何在Vue中为a标签动态绑定包含props变量的title属性

正确实现写法 #

在Vue中要给属性绑定动态值，必须使用v-bind:（可简写为:）前缀标记属性为动态绑定，内部直接写合法的JS表达式即可，不需要使用{{ }}插值语法。

你可以任选以下两种写法的其中一种：

写法1：ES6模板字符串（更推荐，可读性更高）

<a @click="testFunc()" :title="`More on ${props.item[hdr.value]}`">{{ props.item[hdr.value] }}</a>

写法2：加号拼接字符串

<a @click="testFunc()" :title="'More on ' + props.item[hdr.value]">{{ props.item[hdr.value] }}</a>

核心注意事项 #

• 不带:前缀的属性会被Vue解析为普通静态字符串，不会执行内部的表达式
• {{ }}双大括号仅可用于标签内部的文本插值，不能放在属性值中使用
• 动态属性内部的内容完全遵循JS语法，字符串常量需要用引号（单/双都可）包裹，和动态变量直接拼接即可

内容的提问来源于stack exchange，提问作者Dustin Cook