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

文章目录

        • 问题描述
        • 解决办法
          • 第一种解决办法,v-model.number
          • 第二种解决办法,:value
        • 相关链接

问题描述

切换下拉框选项时,被选中项的值是字符串类型,不是数值类型,导致2+5=25。
收集表单数据时遇到的问题及其解决办法_第1张图片

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>demo1title>
    <script src="../lib/vue.js">script>
head>
<body>
    <div id="root">
        <select v-model="x">
            <option value="1">1option>
            <option value="2">2option>
            <option value="3">3option>
        select>
        +
        <select v-model="y">
            <option value="4">4option>
            <option value="5">5option>
            <option value="6">6option>
        select>
        ={{sum}}
    div>

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

解决办法

解决办法有二,分别是

  1. v-model.number
  2. value前面加冒号,即:value,让vue将引号内的内容当js表达式处理。
第一种解决办法,v-model.number

收集表单数据时遇到的问题及其解决办法_第2张图片

<div id="root">
    <select v-model.number="x">
        <option value="1">1option>
        <option value="2">2option>
        <option value="3">3option>
    select>
    +
    <select v-model.number="y">
        <option value="4">4option>
        <option value="5">5option>
        <option value="6">6option>
    select>
    ={{sum}}
div>
第二种解决办法,:value
<div id="root">
    <select v-model="x">
        <option :value="1">1option>
        <option :value="2">2option>
        <option :value="3">3option>
    select>
    +
    <select v-model="y">
        <option :value="4">4option>
        <option :value="5">5option>
        <option :value="6">6option>
    select>
    ={{sum}}
div>

相关链接

Vue收集表单数据

你可能感兴趣的:(vue2,v-model,select,value)