Vue v-model收集表单数据

Posted 2022-12-16 橘猫吃不胖～

Vue v-model收集表单数据

• 1 单行文本
• 2 多行文本
• 3 复选框
• 4 单选按钮
• 5 选择器
• 6 修饰符

1 单行文本

对于输入框input，直接使用v-model绑定属性即可，该属性需要在data中定义。用法如下：

<input v-model="content">

var vm = new Vue(
    ...
    data: 
        content: ""
    
)

示例：在输入框中输入内容，该内容显示在输入框下

<div id="app">
    <input type="text" v-model="content">
    <br>
    content
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            content: ""
        
    )
</script>

2 多行文本

多行文本textarea直接使用v-model绑定属性即可，该属性在data中定义。具体如下：

<textarea v-model="text"></textarea>

var vm = new Vue(
    ...
    data: 
        text: ""
    
)

示例代码：

<div id="app">
    <textarea v-model="text"></textarea>
    <br>
    <div style="white-space: pre-line;"> text </div>
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            text: ""
        
    )
</script>

3 复选框

复选框除了要用v-model绑定名称之外，还需要给input传递value值，表示选中之后的值。具体如下：

<input type="checkbox" v-model="xxx" value="value1">

无论出现几个复选框，这一组复选框的v-model的值都是xxx，value值则根据按钮的内容随意设置。如果是选项组，则在data中要初始化xxx为空数组，如果是单个复选框，初始化为空字符串即可，具体如下：

var vm = new Vue(
    el: "#app",
    data: 
        xxx: [] / ""
    
)

示例代码：

<div id="app">
    <input type="checkbox" v-model="fruit" value="apple">苹果
    <input type="checkbox" v-model="fruit" value="banana">香蕉
    <input type="checkbox" v-model="fruit" value="peer">鸭梨
    <div>爱吃的水果有：fruit</div>
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            fruit: []
        
    )
</script>

4 单选按钮

单选按钮除了要用v-model绑定名称之外，还需要给input传递value值，表示选中之后的值。具体如下：

<input type="radio" v-model="xxx" value="value1">

单选按钮一般是搭配使用的，那么这一组的单选按钮的v-model的值都是xxx，value值则根据按钮的内容随意设置。如果默认选中某个按钮，则xxx需要在data中初始化为该按钮的value值，具体如下：

var vm = new Vue(
    el: "#app",
    data: 
        xxx: "value1" // 表示默认选中value值为value1的选项
    
)

示例代码：

<div id="app">
    <input type="radio" v-model="number" value="One">One
    <input type="radio" v-model="number" value="Two">Two
    <input type="radio" v-model="number" value="Three">Three
    <div>选中的值是：number</div>
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            number: "Two"
        
    )
</script>

5 选择器

选择器要在select上面使用v-model绑定属性，并且这个属性要在data中进行定义，而option可以选择是否传入value属性，如果传入了value属性，那么属性的值为value值，如果没有传入，属性的值为选项的内容。具体如下：

<select v-model="xxx">
    <option value="value1">option1</option>
    <option>option2</option>
    ...
</select>

var vm = new Vue(
    el: "#app",
    data: 
        xxx: ""
    
)

示例代码：

<div id="app">
    <select v-model="hasValue">
        <option value="has">有value值，value为has</option>
        <option>无value值</option>
    </select>
    选择了：hasValue
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            hasValue: ""
        
    )
</script>

在上面的效果中，我们可以看到，最初的时候选择器是空白的，如果要设置一个默认选项，那么在data中定义的属性值要初始化，有value属性要初始化为value属性，无则初始化为option的内容。

var vm = new Vue(
    el: "#app",
    data: 
        xxx: "value值/option的内容"
    
)

示例代码：

<div id="app">
    <select v-model="hasValue">
        <option value="has">有value值，value为has</option>
        <option>无value值</option>
    </select>
    选择了：hasValue
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            hasValue: "无value值"
        
    )
</script>

6 修饰符

v-model提供了一些修饰符：

修饰符	说明
.number	将输入的合法符串转为数字
.lazy	监听change事件而不是input
.trim	移除输入内容两端空格

---

例如，当收集用户年龄时，类型应该是number，但是input收集的内容是string类型：

<div id="app">
    <input type="number" v-model="age">
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            age: ""
        
    )
</script>

这是需要用到.number修饰符，将类型改为number类型：

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

---

例如，当输入框会输入很多内容时，v-model会对内容实时进行监视，使用.lazy修饰符可以在内容全部输入完成之后，文本框失去焦点时再获取：

<div id="app">
    <textarea v-model.lazy="text"></textarea>
    具体内容：text
</div>
<script>
    var vm = new Vue(
        el: "#app",
        data: 
            text: ""
        
    )
</script>