Vue3 computed-计算属性

最新推荐文章于 2024-11-17 10:41:40 发布

Selicens

最新推荐文章于 2024-11-17 10:41:40 发布

阅读量424

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Web_ChuXia/article/details/122071091

版权

本文介绍了一个使用Vue框架实现的简单示例，展示了如何通过计算属性实现数据的双向绑定。输入框的值会实时反映在页面上，并且可以更新原始数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<p>{{msg}}</p>
    <input type="text" v-model="val">
</template>

<script setup>
import { ref, computed } from 'vue'
const msg = ref('666')
const val = computed({
	get: () => {
		return msg.value
	},
	set: (value) => {
		// value是被修改后的值
		return msg.value = value
	}
})
// 当只需要使用到get:()时的简写方法
const val2 = computed(() => {
	// 此时等同于调用get:()
	return msg.value
})
</script>