src/form.vue

<template>
  <h1>表达输入绑定 - 网页最重要</h1>
  <p>v-model = :value + @input</p>
  <p>{{ msg }}</p>
  <!-- <input type="text" v-model="msg"> -->
  <textarea name="" v-model="msg" id="" cols="30" rows="10"></textarea>
  <input type="checkbox" v-model="checked" name="" id=""> {{ checked }}

  <p>checkedNames: {{ checkedNames }}</p>
  <input type="checkbox" v-model="checkedNames" value="jay">
  <label for="jay"> jay</label>
  <input type="checkbox" v-model="checkedNames" value="xm">
  <label for="xm"> xm</label>

  
  <p>radioNames: {{ radioNames }}</p>
  <input type="radio" v-model="radioNames" value="jay">
  <label for="jay"> jay</label>
  <input type="radio" v-model="radioNames" value="xm">
  <label for="xm"> xm</label>

  <div></div>
  <input type="text" v-model.lazy.trim.number="inputMsg" name="" id=""> lazy.trim.number: {{ inputMsg }}
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
const msg = ref('hello world')
const checked = ref(false)
const checkedNames = ref([])
const radioNames = ref('')

const inputMsg = ref('')
</script>

<style scoped>
</style>