vue3 中ref使用
时间: 2023-10-17 20:05:50 浏览: 33
vue中的ref使用
5星 · 资源好评率100%
在 Vue 3 中,`ref` 是一个新的响应式 API,用于创建一个响应式的数据引用。使用 `ref` 创建的数据可以在模板中直接使用,也可以在 JavaScript 中通过 `.value` 属性进行访问和修改。
以下是一个示例:
```vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment,
}
}
}
</script>
```
在上面的示例中,我们使用 `ref` 创建了一个名为 `count` 的响应式数据引用,并在 `setup` 函数中返回了 `count` 和 `increment` 函数。在模板中,我们直接使用 `count` 变量来显示计数器的值,并在按钮的点击事件中调用 `increment` 函数来增加计数器的值。
注意,在 JavaScript 中访问 `ref` 创建的数据时,需要使用 `.value` 属性。例如,我们在 `increment` 函数中对 `count` 变量进行操作时,需要使用 `count.value++` 的形式。
阅读全文