vue3-表单输入绑定

表单输入绑定

获取表单输入的值方式：

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

2. v-model 指令 （常用）

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






.container {
    section {
        margin-bottom: 20px;
    }
}

示例：

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 值不显示 无效的

表单基本用法

1. 文本

2. 多行文本

3. 复选框

4. 单选按钮

5. 选择器

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('深圳')






.container {
    section {
        margin-bottom: 20px;
    }

    label {
        margin-right: 10px;
    }

    select {
        margin: 20px;
        padding: 20px;
    }
}

示例：

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

  // 动态渲染

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

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

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

...
...

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


     
selected 的值是:{{ selected }}
     
         
         111
         222
     
 

示例：

修饰符

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

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

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