gpt4 book ai didi

vuejs2 - 为什么删除必要的 “}”会产生错误,但错误地正确呈现页面[vue js]?

转载 作者:行者123 更新时间:2023-12-03 08:26:56 24 4
gpt4 key购买 nike

我正在学习教程,制作沙袋游戏here。我做的一切正确。

    new Vue({
el:'#punch_game',
data:{
health:100,
ended:false
},
methods:{
punch:function(){
this.health-=10;
if(this.health <=0){
this.ended=true;
}
},
restart:function(){
this.health=100;
this.ended=false;
}
}
} <---- REMOVING THIS NEEDED bracket MAKES THE Vue instance incomplete, but renders page fine!
<------Keeping it stops vue from rendering page altogether! Why?
);

它给出了此图像,控制台确实指示错误,所需的 支架缺少的 -但至少我可以看到一些按钮,并且Vue可以进行渲染!

kk

在这里,我在main.js中有正确的括号-vue实例带有所有括号,是完整的括号,但它会使所有内容消失并且此错误消息显示:

kk

放大:
    vue.js:597 [Vue warn]: Failed to generate render function:

SyntaxError: Unexpected token } in

with(this){return _c('div',{attrs:{"id":"punch_game"}},[_c('div',{staticClass:"{burst:ended}",attrs:{"id":"bag","":}})
,_v(" "),_c('div',{attrs:{"id":"bag_health"}},[_c('div',{style:({width:health + '%'})})]),_v(" "),_c('div',{attrs:{"id":"controls"}}
,[_c('button',{directives:[{name:"show",
rawName:"v-show",value:(!ended),expression:"!ended"}]
,on:{"click":punch}},[_v("punch")]),_v(" "),_c('button',{on:{"click":restart}},[_v("restart")])])])}


(found in <Root>)

这是一个神秘的海森虫。

最佳答案

fiddle 有几个问题,但是错误来自错误的v-bind使用中的空格:

<div id="bag" v-bind: class="{burst:ended}"></div>
v-bind:class之间不应有任何空格。另外,如果您想以百分比形式显示宽度,我想您应该使用 v-bind:style="{ width: health + '%' }"而不是 health - '%'

您的 fiddle 也坏了,因为您加载了错误的资源(我看不出为什么包括HTML页面会做任何事情),而且JSFiddle已经将所有标记包装在 <body>元素中,因此您不能简单地复制并粘贴整个页面的 <html>标记。

在此处查看固定的 fiddle : https://jsfiddle.net/bogbocwn/24/

关于vuejs2 - 为什么删除必要的 “}”会产生错误,但错误地正确呈现页面[vue js]?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49534129/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com