vue组合api中的数据双向绑定
时间: 2023-12-06 12:44:29 浏览: 29
Vue.js 中的组合 API 提供了一种新的方式来编写可重用的逻辑。在组合 API 中,我们可以使用 `ref` 来创建响应式数据,并使用 `computed` 来计算数据,实现数据的双向绑定。
下面是一个示例:
```vue
<template>
<div>
<input type="text" v-model="searchText" />
<p>{{ searchResult }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const searchText = ref('');
const searchResult = computed(() => {
// 这里可以根据 searchText 计算出搜索结果
return `搜索结果:${searchText.value}`;
});
return {
searchText,
searchResult,
};
},
};
</script>
```
在上面的代码中,我们使用 `ref` 创建了一个名为 `searchText` 的响应式数据,并使用 `v-model` 将其绑定到一个输入框上,实现了双向绑定。同时,我们使用 `computed` 计算了一个名为 `searchResult` 的响应式数据,它会根据 `searchText` 的值来计算出搜索结果。
当用户在输入框中输入文字时,`searchText` 的值会自动更新,`searchResult` 也会自动重新计算并更新到模板中,实现了数据的双向绑定。