嗨，我是 Typescript 的新手。我已經在 Vue 中多次切換了兩個標簽，但現在我第一次使用 Typescript 進行切換。
在控制臺日志中，我看到了更改（true <--> false），但p 標簽始終相同。
<script lang="ts">
export default defineComponent({
inheritAttrs: false,
})
</script>
<script lang="ts" setup>
let checked = false
function checkFunction(value: any) {
checked = !checked
}
</script>
<template>
<div>
<button @click="checkFunction">
<div class=" w-2/6 mx-auto my-auto flex justify-between">
<div>
<h1 class="text-md font-medium text-black ">Lorem, ipsum.</h1>
<p class="text-md font-medium text-gray-500 ">Lorem ipsum dolor sit amet consectetur.</p>
</div>
<p v-if="checked === true">This is true</p>
<p v-else-if="checked === false">This is false </p>
</div>
</button>
</div>
</template>
uj5u.com熱心網友回復：
您應該使用定義checked作為反應變數ref，并使用.value欄位對其進行變異：
<script lang="ts">
export default defineComponent({
inheritAttrs: false,
})
</script>
<script lang="ts" setup>
import {ref} from 'vue'
let checked = ref(false)
function checkFunction(value: any) {
checked.value = !checked.value
}
</script>
<template>
<div>
<button @click="checkFunction">
<div class=" w-2/6 mx-auto my-auto flex justify-between">
<div>
<h1 class="text-md font-medium text-black ">Lorem, ipsum.</h1>
<p class="text-md font-medium text-gray-500 ">Lorem ipsum dolor sit amet consectetur.</p>
</div>
<p v-if="checked">This is true</p>
<p v-else>This is false </p>
</div>
</button>
</div>
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/494308.html
標籤：javascript 打字稿 Vue.js Vuejs3 vue-composition-api
上一篇：如何將父組件的類嵌套在子組件中？