vue的代码问题

Posted 2023-05-07

请问这段代码中的heros:data是什么意思，什么用法
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
table tr td
border:1px solid gray;

table
border-collapse:collapse;
width:300px;

tr.firstLine
background-color: lightGray;

</style>

<div id="div1">

<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>

<tr v-for="hero in heros">
<td>hero.name</td>
<td>hero.hp</td>
</tr>

</table>

</div>

<script>

var data = [
name:"盖伦",hp:341,
name:"提莫",hp:225,
name:"安妮",hp:427,
name:"死歌",hp:893
];
new Vue(
el: '#div1',
data:
heros:data

)

</script>

参考技术A 就是最简单的赋值嘛，data是个json数组，把他赋值给vue实例下的heros
js中可以通过this.heros取值
html中可以用v-for循环渲染这个数组 参考技术B 下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天开始学习Vue.js的使用，但是在学习过程中发现一个问题，那就是页面加载数据时，原始代码会闪现一下。查访各方资料，终的解决方法。 参考技术C 类似于json数据，他把参数数据通过json的方式传过去

vscode Vue文件代码显示不高亮问题

我用vscode打开vue文件高亮显示不对

这些地方显示的都不对，经过搜索发现，打开vscode的设置json进行编辑

"files.associations": 
    "*.vue": "html"
,

加入这一行就可以解决这个问题。保存之后高亮就正常了。