列表渲染语句v-for

循环渲染数字
列表渲染的核心就是Vue的循环指令–v-for
v-for和js中的for循环的原理相似。通过最简单的循环渲染数字来初步了解一下v-for：

<div id="app">
    <ul>
        <li v-for="item in 5" :key="item">{
   {
    item }}</li>
    </ul>
</div>

循环渲染数字的时候，不需要写js代码，Vue的内核会从1开始循环遍历数字，直到5结束。最终得到5个li标签，标签内的item就是每次循环出来的数字。

循环渲染数组

与js遍历数组一样，Vue中的v-for指令也可以遍历数组对象：

<ul>
    <li v-for="(item,index) in nameList" :key="index">{
   {
    item }}</li>
</ul>

<script>
export default {
   
    name: "app",
    // 数据
    data() {
   
        return {
   
            nameList:[