双向数据绑定

最新推荐文章于 2024-01-07 10:00:00 发布

Lou.....

最新推荐文章于 2024-01-07 10:00:00 发布

阅读量212

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lhblmd/article/details/125491537

版权

本文详细介绍了如何在 Vue.js 中实现双向数据绑定，包括表单和组件的双向数据绑定。通过实例代码展示了从基础到进阶的实现方式，帮助读者掌握数据变化与视图同步的核心机制。

摘要由CSDN通过智能技术生成

双向数据绑定

目标：掌握实现双向数据绑定的方式

实现表单双向数据绑定

什么是双向数据绑定?
双向是数据和视图双向数据是数据和视图进行绑定数据变化同步视图视图更改了数据把更改同步回数据

如何实现双向数据绑定?

<template>
	<input type="text" v-model="firstName" />
	<button @click="onClickHandler">button</button>
</template>
<script>
import {
      ref } from "vue";
export default {
     
	setup () {
     
		const firstName = ref("张三");
		const onClickHandler = () => {
     
			firstName.value = "李四";
		};
		return {
     firstName, onClickHandler};
	},
};
</script>

如何监听双向数据绑定中数据的变化?

<template>
	<input
		type="text"
		v-model="firstName"
	    @update:modelValue="onFirstNameChanged($event)"
	/>
</template>
<script>
import {
      ref } from "vue";
export default {
     
	seyup () {
     
		const firstName = ref("张三");
		cosnt onFirstNameChanged = (event) => {
     
			console.log(event);
		};
		return <