关键字: v-model

一、基础使用：文本框

使用下述代码替换app.vue中代码

<script setup>
import {ref} from "vue";

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

<template>
    <h3>用户输入: {{userInputMessage}}</h3>
    <input type="text" v-model="userInputMessage"/>

</template>

上述代码中 userInputMessage 可以实时获取输入框输入的字符并进行存储

二、其他控件绑定

使用下述代码替换app.vue中代码

<script setup>
import {ref} from "vue";

// 复选框定义的变量
const userSelect = ref(true)

// 单选框定义的变量
const picked=ref('男')

// 下拉定义的变量
const selected = ref('张三')
</script>

<template>
    <h3>复选框</h3>
    <input type="checkbox" id="checked" v-model="userSelect"/>
    <label for="checked">{{userSelect}}</label>

    <h3>单选： {{picked}}</h3>
    <input type="radio" id="man" value="男" v-model="picked">
    <label for="man">男</label>
    <input type="radio" id="woman" value="女" v-model="picked">
    <label for="woman">女</label>

    <h3>下拉： {{selected}}</h3>
    <select v-model="selected">
        <option disabled value="张三">张三</option>
        <option>李四</option>
        <option>王朝</option>
        <option>马汉</option>
    </select>
</template>

三、修饰符

修饰符	说明
v-model.lazy	不实时获取数据，只有在失去焦点(鼠标移开控件)的时候才会获取
v-model.number	只接收收的数字，其他的不管
v-model.trim	获取到的数据去掉前后空格（注：如果输入有空格，则空格后的输入不会被获取到）