收集表单数据时遇到的问题及其解决办法

richest_qi

已于 2022-05-05 10:36:39 修改

阅读量489

点赞数

分类专栏： Vue2 文章标签： v-model select value

于 2022-05-05 10:36:05 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/124583662

版权

Vue2 专栏收录该内容

84 篇文章 8 订阅

订阅专栏

文章目录

问题描述

切换下拉框选项时，被选中项的值是字符串类型，不是数值类型，导致2+5=25。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <select v-model="x">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        +
        <select v-model="y">
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        ={{sum}}
    </div>

    <script>
    new Vue({
        el:"#root",
        data(){
            return {
                x:1,
                y:4
            }
        },
        computed:{
            sum(){
                return this.x+this.y;
            }
        }
    })
    </script>
</body>
</html>

解决办法

解决办法有二，分别是

v-model.number
value前面加冒号，即:value，让vue将引号内的内容当js表达式处理。

第一种解决办法，v-model.number

在这里插入图片描述

<div id="root">
    <select v-model.number="x">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    +
    <select v-model.number="y">
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    ={{sum}}
</div>

第二种解决办法，:value

<div id="root">
    <select v-model="x">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
    </select>
    +
    <select v-model="y">
        <option :value="4">4</option>
        <option :value="5">5</option>
        <option :value="6">6</option>
    </select>
    ={{sum}}
</div>