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

vue3

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

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

const visible = ref(true);

function toggle () {
  visible.value = !visible.value;
}

</script>

<template>
  <div v-if="visible">hello world</div>
  <button @click="toggle">
    {{ visible ? '隐藏' : '显示' }}
  </button>
</template>

react hooks

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

import { useState } from 'react';

export default function () {
  const [visible, setVisible] = useState(true);

  function onToggle () {
    // 注意不要直接改visible
    setVisible(!visible);
  }

  return (
    <div>
      { visible && <div>hello world</div> }
      <button onClick={ onToggle }>
        { visible ? '隐藏' : '显示' }
      </button>
    </div>
  );
}

svelte

声明变量的时候真香 但是这个if...

<script>
let visible = true;

function onToggle () {
  visible = !visible;
}
</script>

{#if visible}
  <div>hello world</div>
{/if}
<button on:click={ onToggle }>
  { visible ? '隐藏' : '显示' }
</button>

加油！