Javascript （VUE.js）变体数组不'；我没有出现

我最近一直在为工作学习vue.js，我面临着一个严重的问题。 我想做一个简单的TODO应用程序。在我的index.html中，除了头的div和id为：

#app

的根div之外，我什么都没有

在root div中，我有另一个div（带有一个类

.todobox

），其中我使用

v-for

放置了一个变体列表。当我在main.js文件中引用

#app

并在其中放置一系列变体时，控制台不会显示任何重大错误。我的变体还包含某种描述（

variant.varDesc

），我将其保存在

todobox

中的

元素中

问题：当我打开一个应用程序时，它只显示一个空白的.todobox和一个

元素，其中包含以下文本：
{{variant.varDesc}

有人能帮我吗？我将感谢任何帮助！提前谢谢


var todo=新的Vue({
el:“#应用程序”，
数据：{
完成：{
“背景色”：深红色，
},
样式撤消：{
“文本装饰”：行通过，
“背景色”：灰色
},
变体：[
{
变量：2333，
varDesc:“创建新实例”，
varStyle:styledone
},
{
变量：2345，
varDesc:“启动计算机”，
varStyle:styledone
},
{
变量：2787，
varDesc:“打开谷歌浏览器”，
varStyle:styledone
}
],
}
})
正文{
保证金：0
}
#应用程序{
利润率：2%；
证明内容：中心；
对齐项目：居中；
}
.标题{
高度：100px；
背景：线性梯度（90度，rgba（162148203,0.7651435574229692）0%，rgba（228147205,1）50%，rgba（169163214,0.7035189075630253）100%）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
字体大小：30px；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
}
托多博克斯先生{
显示：内联块；
边框：2个黑色实心；
边界半径：5%；
颜色：白色；
左边距：2em；
边缘顶端：2rem；
-网络工具包盒阴影：14px 10px 5px-1px rgba（255153255,1）；
-moz盒阴影：14px 10px 5px-1px rgba（255153255,1）；
盒影：14px 10px 5px-1px rgba（255153255,1）；
-webkit转换持续时间：0.4s；
过渡时间：0.4s；
}
.撤消{
背景颜色：深红色；
}
.完成{
文字装饰：线条贯通；
背景颜色：灰色；
}
.todobox:悬停{
光标：指针；
}
.todobox:活动{
盒影：无；
过渡：所有0.3秒
}

待办事项清单
事項清單
{{variant.varDesc}}

您有一些语法错误：


样式对象的值周围需要有引号
styledone
需要引用为
this.styledone
：style=“{variant.varStyle}”
应该是
：style=“variant.varStyle”


var todo=新的Vue({
el:“#应用程序”，
数据：{
完成：{
“背景色”：“深红色”，
},
样式撤消：{
“文本装饰”：“线条通过”，
“背景色”：“灰色”
},
变体：[
{
变量：2333，
varDesc:“创建新实例”，
varStyle:this.styledone
},
{
变量：2345，
varDesc:“启动计算机”，
varStyle:this.styledone
},
{
变量：2787，
varDesc:“打开谷歌浏览器”，
varStyle:this.styledone
}
],
}
})
正文{
保证金：0
}
#应用程序{
利润率：2%；
证明内容：中心；
对齐项目：居中；
}
.标题{
高度：100px；
背景：线性梯度（90度，rgba（162148203,0.7651435574229692）0%，rgba（228147205,1）50%，rgba（169163214,0.7035189075630253）100%）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
字体大小：30px；
字体系列：Verdana，日内瓦，塔荷马，无衬线；
}
托多博克斯先生{
显示：内联块；
边框：2个黑色实心；
边界半径：5%；
颜色：黑色；
左边距：2em；
边缘顶端：2rem；
-网络工具包盒阴影：14px 10px 5px-1px rgba（255153255,1）；
-moz盒阴影：14px 10px 5px-1px rgba（255153255,1）；
盒影：14px 10px 5px-1px rgba（255153255,1）；
-webkit转换持续时间：0.4s；
过渡时间：0.4s；
}
.撤消{
背景颜色：深红色；
}
.完成{
文字装饰：线条贯通；
背景颜色：灰色；
}
.todobox:悬停{
光标：指针；
}
.todobox:活动{
盒影：无；
过渡：所有0.3秒
}

待办事项清单
事項清單
{{variant.varDesc}}

在我看来，您在导入
vue
之前导入了脚本。更改
脚本
标记的顺序，它应该可以工作：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./main.js"></script>



还要确保使用
this
引用
styledone
。否则会出现错误：
main.js:15未捕获引用错误：未定义styledone
可能是样式代码的语法错误检查ConsoleAnks@Daniel_Knights！我尝试了你的解决方案，相应地修改了代码，但奇怪的是，页面上的结果保持不变。但是，现在控制台的输出是
Not