最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】vuejs中给css中绑定属性变量报错:Unexpected v-bind before :

JS crifan 2153浏览 0评论
折腾:
【未解决】vuejs中如何用变量控制css属性的值
期间,参考别人,去写上代码:
<img v-bind:class='{ visibility: isNxmleVisible }' class="switch_NXMLE" src="../../assets/control_room/switch_circle_closed.png" width="46" height="28">
报错:
Unexpected 'v-bind' before ':'.eslintvue/v-bind-style
vuejs Unexpected v-bind before :
FIXED: V-bind invalid expression – Get Help – Vue Forum
Invalid expression: v-bind:class – Get Help – Vue Forum
去加上引号
<img v-bind:class="{ 'visibility': isNxmleVisible }" class="switch_NXMLE" 
问题依旧
vue.js – Condition in v-bind:Style – VueJS – Stack Overflow
javascript – Error with v-bind in vue.js – Stack Overflow
意思是删掉v-bind?
<img class="{ 'visibility': isNxmleVisible }" class="switch_NXMLE" 
但是更不对了
  duplicate attribute: class
去掉中间的空格
<img v-bind:class="{'visibility':isNxmleVisible}"
问题依旧。
去掉后面的
class="switch_NXMLE"
问题依旧。
vue.js – Vue Error compiling template – Unexpected colon when using v-attr – Stack Overflow
去掉:v-bind
<img :class="{'visibility':isNxmleVisible}" class="switch_NXMLE" 
 结果:终于可以了。至少语法没错。
【总结】
此处vuejs中,官网教程都说是
<xxx v-bind:class="{xxx: yyy}"
结果,此处确报错
Unexpected 'v-bind' before ':'
试了半天最后发现是:
去掉v-bind
<img :class="{'visibility':isNxmleVisible}" xxx
即可。

转载请注明:在路上 » 【已解决】vuejs中给css中绑定属性变量报错:Unexpected v-bind before :

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.172 seconds, using 22.10MB memory