36 lines
719 B
Vue
36 lines
719 B
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
const msg = ref<string>("Tom is building a vue template, oh yeah");
|
|
const status = ref<boolean>(true);
|
|
|
|
defineProps({
|
|
hide: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
// Define function directly
|
|
const toggleStatus = (): void => {
|
|
status.value = !status.value;
|
|
};
|
|
</script>
|
|
|
|
<template v-if="hide">
|
|
<div class="card">
|
|
<div class="tj">{{ msg }} {{ status }}</div>
|
|
<p v-if="status">{{ msg }} {{ status }}</p>
|
|
<button v-on:click="toggleStatus">show/hide</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.tj {
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
text-decoration: underline line-through;
|
|
color: rgba(97, 5, 5, 0.75);
|
|
}
|
|
</style>
|