Vue报错Interpolation inside attributes has been removed.解决方法

简介: Vue报错Interpolation inside attributes has been removed.解决方法

一、报错问题


基于Vue开发项目时,需要用到v-for循环来循环遍历生成组件,在写好内容后保存运行时之后出现了这样的报错,将问题解决后在此留下记录,供日后回过头来复习

image.png

image.png

报错时的代码如下

image.png

二、解决方法


HTML标签中使用到插值表达式的属性加一个:{{}}去掉即可

image.png

运行结果

image.png

总结


Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.这样的错误的原因是系统在提示我们属性内的插值已被删除,要改用v-bind或者冒号来进行简写,因此在用到插值表达式的属性前加上:和将{{}}去掉即可,同时也了解了在Vue里面标签的属性中不能直接使用插值表达式

image.png


相关文章
|
2天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
16 0
|
2天前
|
Web App开发 缓存 JavaScript
优化Vue首页加载速度的实用方法
优化Vue首页加载速度的实用方法
16 1
|
2天前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
15 1
|
2天前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
|
2天前
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
7 0
|
2天前
|
JavaScript 数据处理
vue报错 ‘超出最大堆栈大小‘
vue报错 ‘超出最大堆栈大小‘
10 0
|
2天前
|
缓存 JavaScript 开发者
什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择
什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择
11 0
|
2天前
|
JavaScript 搜索推荐 前端开发
vue报错 ‘超出最大堆栈大小‘
vue报错 ‘超出最大堆栈大小‘
19 3
|
2天前
|
JavaScript
Vue自定义指令的三个方法
Vue自定义指令的三个方法
7 0
|
2天前
|
JavaScript
Vue.js 中父组件调用子组件的方法
Vue.js 中父组件调用子组件的方法
40 2