【vue3/react hooks/svelte对比学习】基础语法：条件渲染

vue3

模板语法和vue2保持一致 只是声明变量语法不同

<script setup>
import { ref } from 'vue';

const list = ref([1, 2, 3]);

</script>

<template>
  <ul>
    <li v-for="(item, i) in list" :key="i">{{ item }}</li>
  </ul>
</template>

react hooks

jsx部分的语法和react class保持一致 只是声明变量语法不同

import { useState } from 'react';

export default function () {
  const [list] = useState([1, 2, 3]);

  return (
    <ul>
      {
        list.map((item, i) => <li key={ i }>{ item }</li>)
      }
    </ul>
  );
}

svelte

不用写key了 香

<script>
const list = [1, 2, 3];
</script>

<ul>
  {#each list as item}
    <li>{ item }</li>
  {/each}
</ul>

加油！