出现这个错误vue.js:634 [Vue warn]: Error compiling template: invalid expression: Unexpected token的解决办法

最新推荐文章于 2024-05-07 17:08:10 发布
最新推荐文章于 2024-05-07 17:08:10 发布
阅读量1.1w 收藏
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45372418/article/details/109671637
版权
本文介绍了在使用Vue.js时遇到的模板编译错误，重点讲述了如何处理`Vuewarn`:Error compiling template的警告。错误主要涉及两个方面：1) 绑定多个class时，应使用逗号而不是分号分隔；2) 动态绑定class对象时，需使用花括号而不是方括号。通过改正这些常见错误，可以避免Vue.js模板编译问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天遇到

在这里插入图片描述
如图的问题，

错误代码

在这里插入图片描述

直接上解决办法

在这里插入图片描述

出现这个错误的情况我遇到这几个vue.js:634 [Vue warn]: Error compiling template

1、在绑定多个class是中间用‘“；”分隔 ，应该用“，”

2、为class动态绑定对象，所以要用{}，千万不要用 [ ],这是绑定数组时用的

[Vue warn]: Error compiling template:
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 2644
vue.js:634 [Vue warn]: Error compiling template: v-slot can only be used on components or . 2 | 3 | header 4 | footer | ^^^^^^^^^^^^^^^ 5 | 6 | (f...
Vue 使用中遇到的问题（一）
mystonelxj的博客
03-14 4714
在使用Vue过程中，如果语法使用不当，会在调试区域（Chrome 开发者平台中的Console区域）出现提示错误，因具体情况不同提示有差异： 1 ，Vue实例未加载 错误提示： vue.js:616 [Vue warn]: Unknown custom element: <my-component> - did you register the component correct...
[Vue warn]: Error compiling template:invalid expression: Unexpected token ‘{‘ in
asdf1239900的博客
09-14 1684
vue中模板字符串的语法使用错误记录
vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-08 1万+
template 不支持可选链操作符，在可以升级 vue 版本的情况下，我们可以升级到。以上的几种版本都是可以的，安装切换完版本，然后运行服务，即可。一定要确定好 vue 版本的问题，可以去依赖里面看看版本，，在 vue template 里使用。大家也可以测试其他的版本，我试了一下。版本，同时 node 版本升级到。在 script 里添加是不报错的。然后通过 nvm 工具切换版本到。我也测试了一下，也是可行的。我使用的node 版本是。这个问题主要是 vue。
模板字符报错vue.js:634 [Vue warn]: Error compiling template: invalid expression: Unexpected end of input
qq_44859233的博客
12-08 1204
Vue报错如下,解决办法: 不使用模板字符串 <ul :style="{transition:chageStr,transform:'translateX('+currentWidth+'px)'}" v-on:transitionend="transformend"> <li > <img :src="firstImg.src" /> </li> <li v-for="(item, index) in im.
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
Vue源码分析——第三章
Lee的博客
09-10 693
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
webpack源码解析四
vv_bug
07-12 1679
前言 我们接着前面的文章webpack源码解析二继续往下探索webpack的配置，demo的github地址：https://github.com/913453448/webpack-demo.git。 DevServer webpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置，因为webpack-dev-server依赖webpack-dev-middleware。 我们首先在我们的因
java.lang.Error: Unresolved compilation problems:解决方案
huangbaokang的博客
07-18 9万+
出现该问题的原因主要是编译等级跟jdk不一致。 先查看你jdk版本 我这里是1.7,设置下Java compiler 和 Project Facets，问题解决！！
[Vue warn]: Error compiling template: vue 编译模板错误
马一文
11-08 2万+
[Vue warn]: Error compiling template: &lt;div id="app"&gt; &lt;ul class="loginul"&gt; &lt;li&gt; 登陆账号：&lt;input type="text" id="userCode" value="{{user.userCode}}" name="use
解决 SyntaxError: Unexpected token ‘.‘ 报错问题
最新发布
samll_redhat的博客
05-07 6830
解决 SyntaxError: Unexpected token '.' 报错问题
Invalid or unexpected token 捕获的查询无效或意外的标记
qzo_smile的博客
03-21 1855
捕获的查询无效或意外的标记 好多让去检查数据内容 ,但其实这是append()进去的标记, 有的讲live() 会跟jquery版本有问题 ,但是亲测无效, 后来 $(".").on(‘click’,“selector”,function (e) {}) 翻译成中文是： 捕获的查询无效或意外的标记。 解决方案: $(".").on(‘click’,“selector”,function...
Vue报错汇总
李振恒
01-04 280
错误一 vue.js:634 [Vue warn]: Error compiling template: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 官网： ...
Invalid or unexpected token：数据格式错误
热门推荐
FromNowOnUntilTheEnd
10-23 13万+
Uncaught SyntaxError: Invalid or unexpected token， 翻译成中文是： 捕获的查询无效或意外的标记。 代码逻辑没问题，那么就是数据问题了，把页面要展示的数据全部检查一遍后，果然发现疑点 1、多了单引号、双引号 2、加密后的一串16位/32位字符串，在jsp传到后台的时候报错，解决办法：给这串字符串加单引号或者双引号 其实这个错误提示是告诉我们： ...
vue基础知识
A123ppleQueen的博客
06-08 504
vue 第三方开发的，基于MVVM设计模式的，渐进式的，纯前端js框架 以数据操作（增删改查）为主的项目，都可以用vue开发 原生 浏览器自带的 dom 函数库 jquery vue使用 下载vue.js文件到网页中引入 引入<script src="js/vue.js"> 脚手架：一套标准的文件夹和文件结构 Typora ---一款简洁的Markdown编辑器 ...
Uncaught SyntaxError: Invalid or unexpected token
weixin_35790277的博客
05-08 605
Uncaught SyntaxError: Invalid or unexpected token 问题：无效或意外的访问。 原因：多加了或者少加了标点符号。 解决：只能花点眼力见找。 避免：还是要仔细，写代码不要追求速度，而不注意质量。
vue.js:634 [Vue warn]: Error compiling template: invalid expression: Unexpected string in product.title"" Raw expression: :title="product.title"""
03-22
这个错误提示是由 Vue.js 编译模板时发现的，它指出在 product.title 属性的绑定表达式中出现了一个非预期的字符串。具体来说，这个表达式中的双引号似乎不正确，可能是由于缺少了某个字符或者是语法错误导致的。需要检查模板代码中的语法错误和拼写错误，以确保表达式正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值