vue 表单之通过v-model绑定单选按钮radio

Posted 2023-04-09

参考技术A 用v-model绑定单选框能带来很多便捷的开发体验。
基础用法
<template>
<div
id="app">
<input
type="radio"
id="male"
value="Male"
v-model="gender">
Male
<input
type="radio"
id="female"
value="Female"
v-model="gender">
Femalea
<p>gender</p>
</div>
</template>
<script>
export
default

name:
'app',
data
()

return

gender:
''



</script>
新建一个名为
gender
的数据模型，通过
v-model
把两个单选按钮都绑定
gender
，
<p>
也绑定了
gender
，所以单选按钮选了哪项，都会把对应的
value
值赋给
gender
，
从而使
<p>
的内容也发生变化。
通过
v-model
绑定，Vue会帮我们解决分组问题。以前使用单选按钮时，是需要设置
name
属性的，现在用
v-model
的话，就不用设置
name
属性了。
默认值
如果需要在页面第一次加载的时候就有一个默认选项，可以在数据模型里直接使用对应的
value
值。
比如希望页面在第一次加载时默认选中
Male。
<template>
<div
id="app">
<input
type="radio"
id="male"
value="Male"
v-model="gender">
Male
<input
type="radio"
id="female"
value="Female"
v-model="gender">
Female
<p>gender</p>
</div>
</template>
<script>
export
default

name:
'app',
data
()

return

gender:
'Male'



</script>
只要把数据模型里的
gender
的值改成“Male”即可。
当然，这个值是不能随便写的。一般是需要写上其中一个单选按钮的
value
值。
如果随便写一个字符串也不会报错，最后的作用其实和空字符串一样。
总结
以上所述是小编给大家介绍的vue
表单之通过v-model绑定单选按钮radio,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:对Vue-
动态元素属性及v-bind和v-model的区别详解vue
v-model实现自定义样式多选与单选功能vue
v-model动态生成详解vue中v-model的应用及使用详解vue如何在自定义组件中使用v-modelvue项目中v-model父子组件通信的实现详解vue
自定义组件
v-model双向绑定、
父子组件同步通信的多种写法vue中v-model动态生成的实例详解VUE中v-model和v-for指令详解浅谈
Vue
v-model指令的实现原理vue
v-model表单控件绑定详解

Vue v-model收集表单数据

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>