vue学习笔记之：单选框、复选框、下拉列表框的数据绑定操作

本文链接：https://blog.csdn.net/guxuhua123_01/article/details/102570547

这篇博客探讨了Vue的双向数据绑定特性，主要聚焦于如何在单选框、复选框和下拉列表框中使用v-model进行数据绑定。步骤包括在data中定义变量，然后在标签上绑定该变量，通过插值表达式或this.方式获取变化后的值。文中提供了具体示例，展示了v-model在不同类型的表单元素中如何绑定value值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的一个很重要的特性就是数据绑定，而核心的指令就是：v-model

使用的话分为如下步骤：

第一步：data属性中定义好绑定的值的变量

第二步：标签上通过v-model绑定好该变量

第三步：无论上通过插值表达式{{}}的方式还是在代码里通过this.的方式，都是可以获取到变化后的值的

简单的实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue多行文本的数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>多行文本输入内容：</p>
    <p style="white-space: pre-line">{{message}}</p>
    <textarea v-model="message" placeholder="请输入多行文本"></textarea>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>
</html>

单选框的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue单选框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="radio" id="a" value="A" v-model="checkVal"/>
    <label for="a">选择A</label>
    <input type="radio" id="b" value="B" v-model="checkVal"/>
    <label for="b">选择B</label>
    <br>
    <p>您选择的是：{{checkVal}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            checkVal: ''
        }
    })
</script>
</html>

注意：v-model此时绑定的其实是单选框的value对应的值

复选框的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue复选框的使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" id="a" value="A" v-model="pickValues"/>
    <label for="a">A</label>
    <input type="checkbox" id="b" value="B" v-model="pickValues"/>
    <label for="b">B</label>
    <input type="checkbox" id="c" value="C" v-model="pickValues"/>
    <label for="c">C</label>
    <br>
    <span>您选择的是：{{pickValues}}</span>
    <br>
    <input type="button" :value="btnVal" @click="getVal()">
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            pickValues: [],
            btnVal: '获取用户选择的内容'
        },
        methods: {
            getVal: function () {
                if (this.pickValues && this.pickValues.length) {
                    this.pickValues
                        .filter(p => p.indexOf('A') !== -1)
                        .forEach(a => alert(a));
                }else{
                    alert('您暂时未选择任何东西')
                }
            }
        }
    })
</script>
</html>

下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue下拉单选框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <select v-model="selectedVal">
        <option value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>您选择的是：{{selectedVal}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            selectedVal: ''
        },
        beforeMount: function () {
            console.log('VUE示例绑定之前')
        }
    })
</script>
</html>

单选框、复选框和下拉框绑定的都是根据对应的标签中的value字段对应的值