使用vue.js修改next 3中变量的值

Question

我对next 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的答案是正确的，这就是使用Options API的方法。要添加，这里有另一种使用Composition 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中的反应性。