Conditional rendering in ...
React
Link
import { useState } from ' react ' ;
const App = () => {
const [ isVisible , setIsVisible ] = useState < boolean > ( true );
return (
< div > { isVisible ? < p > I'm right here!</ p > : < p > I'm invisible!</ p > } </ div >
);
};
Enter fullscreen mode
Exit fullscreen mode
Vue
Link
< script setup lang = "ts" >
import { ref } from 'vue'
const isVisible:Boolean = ref(true)
</ script >
< template >
< p v-if = "isVisible" > I'm right here!</ p >
< p v-else > I'm invisible!</ p >
</ template >
Enter fullscreen mode
Exit fullscreen mode
Svelte
Link
< script lang = "ts" >
let isVisible:boolean = true;
</ script >
{ # if isVisible }
< p > I'm right here!</ p >
{: else }
< p > I'm invisible!</ p >
{ / if }
Enter fullscreen mode
Exit fullscreen mode
Top comments (0)