Vue3-16-【v-model】 表单数据绑定

作用描述

v-model 指令，实现了 表单输入组件的值 与 js 中的变量的值的绑定关系。
当我们在页面上执行输入动作时，js中变量的值也会同步发生变化。

表单不仅仅局限于输入框，其他的如 ： 单选按钮，复选框，下拉选择框，文本域输入框 等都可以使用。

语法格式

语法很简单 ： v-model="变量名"

案例代码

案例描述 ： 
1、页面上有一个文本输入框，有一个展示的变量；
2、js中有一个变量，在页面上展示；
3、文本输入框的值 与 变量 通过 v-model 进行绑定；
4、效果 ：当文本输入框中的值发生改变时，变量的值也同步发生改变。

<template>

    <div>
        
        textValue : {{ textValue }}
        <br>
        
        <input type="text" v-model="textValue">
    div>
  
template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 定义一个变量用于数据绑定
    const textValue = ref('这是初始值')

script>
    
<style scoped>
style>

运行效果