vue3-表单输入绑定

表单输入绑定

获取表单输入的值方式：

1. 手动连接值绑定和更改事件监听器

2. v-model 指令 （常用）

<script lang="ts" setup>
import { ref } from "vue"
// 定义个变量接收输入的内容：
const text = ref("111")
const text2 = ref("222")

</script>

<template>
    <div class="container">
        <section>
            <!-- 输入内容通过事件绑定值： -->
            <p>默认的value是 111</p>
            <input :value="text" @input="event => text = event?.target?.value" />
            <div>这是输入的值{{ text }}</div>
        </section>

        <section>
            <!-- v-model 指令帮我们简化了这一步骤 -->
            <p>默认的value是 222</p>
            <input v-model="text2" value="888">
            <div>这是输入的值{{ text2 }}</div>
        </section>

    </div>
</template>

<style lang="scss" scoped>
.container {
    section {
        margin-bottom: 20px;
    }
}
</style>

示例：

v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合

表单类型	绑定属性值	绑定事件
input	value	input
textarea	value	input
checkbox	checked	change
radio	checked	change
select	value	change

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

比如下面 888 值不显示 无效的

<input v-model="text2" value="888">

表单基本用法

1. 文本

2. 多行文本

3. 复选框

4. 单选按钮

5. 选择器

<script lang="ts" setup>
import { ref } from "vue"
// 定义个变量接收输入的内容：
const f1 = ref("f1的默认值")
const f2 = ref("f2的默认值")
const f3 = ref(true)
const f4 = ref([])
const f5 = ref('女')
const f6 = ref('深圳')

</script>

<template>
    <div class="container">
        <section>
            <p>input输入框</p>
            <p>f1的值是: {{ f1 }}</p>
            <input v-model="f1" placeholder="请输入" />
        </section>

        <section>
            <p>多行文本</p>
            <!-- 错误 -->
            <!-- <textarea>{{ text }}</textarea> -->
            <p>f2的值是: {{ f2 }}</p>
            <!-- 正确 -->
            <textarea v-model="f2" rows="3"></textarea>
        </section>

        <section>
            <p>复选框</p>
            <p>单个</p>
            <input type="checkbox" id="checkbox" v-model="f3" /> <label for="checkbox">统一协议</label>
            <br>
            <label for="checkbox">f3的值是：{{ f3 }}</label>
            <br>
            <br>
            <p>多个</p>
            <input type="checkbox" id="h1" value="篮球" v-model="f4" /> <label for="h1">篮球</label>
            <input type="checkbox" id="h2" value="足球" v-model="f4" /> <label for="h2">足球</label>
            <input type="checkbox" id="h3" value="排球" v-model="f4" /> <label for="h3">兵乓球</label>
            <br>
            <label for="checkbox">f4的值是：{{ f4 }}</label>
        </section>

        <section>
            <p>单选按钮</p>
            <p>f5的值是： {{ f5 }}</p>
            <input type="radio" id="one" value="男" v-model="f5" />
            <label for="one">男</label>

            <input type="radio" id="two" value="女" v-model="f5" />
            <label for="two">女</label>
        </section>

        <section>
            选择器
            <div>f6的值是 : {{ f6 }}</div>

            <select v-model="f6" multiple>
                <option disabled value="">请选择一个你喜欢的城市</option>
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
                <option>广州</option>
            </select>

        </section>

    </div>
</template>

<style lang="scss" scoped>
.container {
    section {
        margin-bottom: 20px;
    }

    label {
        margin-right: 10px;
    }

    select {
        margin: 20px;
        padding: 20px;
    }
}
</style>

示例：

复选框 true-value 和 false-value 属性

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

  // 动态渲染
<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。

• 这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：

选择器，非字符串类型的值绑定

...
...

const selected = ref({ number: 111 })
...
...

<section>
     <p>selected 的值是:{{ selected }}</p>
     <select v-model="selected">
         <!-- 内联对象字面量 -->
         <option :value="{ number: 111 }">111</option>
         <option :value="{ number: 222 }">222</option>
     </select>
 </section>

示例：

修饰符

• .lazy 每次 change 事件后更新数据 （节流）

• .number 用户输入自动转换为数字

• .trim 自动去除用户输入内容中两端的空格

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

<input v-model.number="age" />

<input v-model.trim="msg" />