You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte

41 lines
728 B

<script>
import { onDestroy } from 'svelte';
const emojis = {
apple: '🍎',
banana: '🍌',
carrot: '🥕',
doughnut: '🍩',
egg: '🥚'
};
// the name is updated whenever the prop value changes...
export let name;
// ...but the "emoji" variable is fixed upon initialisation of the component
const emoji = emojis[name];
// observe in the console which entry is removed
onDestroy(() => {
console.log('thing destroyed: ' + name);
});
</script>
<p>
<span>The emoji for {name} is {emoji}</span>
</p>
<style>
p {
margin: 0.8em 0;
}
span {
display: inline-block;
padding: 0.2em 1em 0.3em;
text-align: center;
border-radius: 0.2em;
color: #333333;
background-color: #ffdfd3;
}
</style>