[Vue warn]: Error compiling template:invalid expression: Unexpected token ‘{‘ in

问题描述

今天做项目练习的时候又报了如下错误，invalid expression: Unexpected token '{' in ...

（  无效表达式：中的意外标记“｛”  ），

 下面是错误的源码

<img :src="image/head/${topicInfo.head}"/><BR/>

原因分析：

起初根据报错信息以为是 ' { ' 哪里出了问题，但是后来想起了' $ '这个符号的使用，而此处作用是字符串拼接时进行head属性的插值操作，就认为可能是自己的模板语法出了问题。

果然是自己没记牢，$使用时需要配合`${ 属性名}`的方式使用，如:

<div :id="`list-${id}`"></div>

项目中此处少了`  `这两个至关重要的符号。

解决方案：

<img :src="`image/head/${topicInfo.head}`"/><BR/>

添加` `以后报错便解决了。