使用 vue.js 更改 Nuxt 3 中的变量值

Question

我是 Nuxt 3 和 Vue 3 的新手。当我点击我的 div 标签时，我只想简单地更改值。

<a id="change" @click="changeValue()">{{value}}</a>

<script  lang="ts" setup>
let value = "Old";
function changeValue(){
  value="new"
}
</script>

这是我唯一尝试过的

Answer 1

Rap 的答案是正确的，这就是你如何使用选项 API 来做到这一点。要补充的是，这是使用组合 API 来做到这一点的另一种方法：

• 您需要使用 Ref() 将value变量声明为反应变量。 Ref可以包含任何数据类型。
• 要更新反应变量，请使用.value属性。

<template>
  <div id="change" @click="changeValue">{{myValue}}</div>
</template>

<script setup>
const myValue = ref("Old");
function changeValue(){
  myValue.value = "new"
}
</script>

注意：我在上面的示例中将变量名称value替换为myValue以避免与.value属性混淆。

如需进一步阅读，您可以查看Vue 中的反应性。