列表渲染 map 与 v-for

1、react App.js

const songs = [
  {
    
    id: 1,
    name: 'hhhhh'
  },
  {
    
    id: 2,
    name: 'xxxxx'
  },
  {
    
    id: 3,
    name: 'aaaaa'
  }
]
function App() {
    
  return (
    <div className="App">
      <ul>
        {
    songs.map(song => <li key={
    song.id}>{
    song.name}</li>)}
      </ul>
    </div>
  );
}

export default App;

2、vue App.vue

<template>
  <div id="app">
    <ul v-for="song in songs" :key="song.id">
        <li>{
    {
    song.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      songs: [
        {
    
          id: 1,
          name: 'hhhhh'
        },
        {
    
          id:2,
          name:'xxxxx'
        },
        {
    
          id:3,
          name:'aaaaa'
        }
      ]
    }
  }
}
</script>

<style>
</style>