双向数据绑定
目标:掌握实现双向数据绑定的方式
实现表单双向数据绑定
- 什么是双向数据绑定?
双向是数据和视图 双向数据是数据和视图进行绑定 数据变化同步视图 视图更改了数据 把更改同步回数据 - 如何实现双向数据绑定?
<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 <