vue关于select组件绑定的值为数字类型的问题

目录
  • select组件绑定的值为数字类型问题
    • number可以将绑定的 v-model 改为 number类型
  • 若元素属性需要绑定的值为数字时的处理
    • 1.如果直接这样写
    • 2.解决

select组件绑定的值为数字类型问题

在日常开发中，我们双向绑定的form表单，经常会遇到对数字类型的绑定，但对于v-model 绑定的值，输入数字会自动转成字符串类型。

对于input输入框绑定的值，想要修改为数字类型很简单，只需要使用表单的修饰符就可以。

如下所示：

number可以将绑定的 v-model 改为 number类型

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

但对于 select 选择框或者 radio 单选框来说，则没有那么友好了。

select option 绑定的 value 是数字，但是 v-model 为 string ，这就会导致正常的数据无法渲染。解决方法如下所示：

使用 :value

<a-form-item label="登录方式" name="type">
                    <a-radio-group v-model:value="type">
                        <a-radio :value="1">密码登录</a-radio>
                        <a-radio :value="2">验证码登录</a-radio>
                    </a-radio-group>
</a-form-item>

这样就可以正常渲染！

若元素属性需要绑定的值为数字时的处理

1.如果直接这样写

<select    v-model='value'>
    <option  value='数字'>...</option>
</select>

这时vue并不会把你写入的数字，解析成数字而是解析成字符串，即使是你写到data中一个变量为数字，再使用。都是如此。

2.解决

如果属性需要是数字时(type=Number).需要在属性值前使用v-bind==> ‘:’属性值 的写法。

具体写法如下

<select    v-model='value'>
    <option  ：value='数字'>...</option>
</select>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue select组件绑定的值为数字类型遇到的问题

    目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q

  • vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    vue el-select绑定对象时,回显内容不正确,始终是最后一项的解决

    目录 一.问题描述 二.原因分析和解决方法 三.总结 el-select绑定对象时,回显内容始终是最后一项 一.问题描述 使用el-select组件绑定类型为对象时,回显内容始终为选项的最后一项,但是通过控制台打印的信息却是所选项. 使用代码: <template>   <div class="page-index">     <el-form       :model="ruleForm"       :rules="rul

  • vue中的select绑定多个值

    目录 vue select绑定多个值 vue el-select 绑定id值 vue select绑定多个值 不再通过v-model和value进行绑定 而是通过绑定索引值Index 然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值 <el-select v-model="basic_info.itemindex" placeholder=""  @input="change">     <el-

  • Vue select 绑定动态变量的实例讲解

    概述 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定.所以通过数据的id或者下标进行变量拼接.页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code <div v-for="(item, index) in tagAllDate" :key="index"> <el-form-item :label="item.name"> <el-sel

  • vue里面的el-select绑定默认值方式

    目录 vue的el-select绑定默认值 el-select绑定的值无法选中el-option问题 vue的el-select绑定默认值 vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值 el-select绑定的值无法选中el-option问题 框架vue

  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    1.vue中echarts的使用 引入echarts后 let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构 var option = { //backgroundColor:"#111c4e", tooltip: { trigger: 'axis' }, legend: { //图表上方的图例显隐 data:['光合有效辐射'], textStyle: { color: '#fff' } }

  • vue关于select组件绑定的值为数字类型的问题

    目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为

  • element-ui中select组件绑定值改变,触发change事件方法

    1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)

  • vue绑定数字类型 value为数字的实例

    直接加: <el-select v-model="searchData.status" filterable placeholder="请选择" @change="gamefilter" class="mr40"> <el-option label="开启" :value='0'></el-option> <el-option label="关闭"

  • vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

    场景 今天在使用 v-model 进行组件双向数据绑定的时候遇到了一个奇怪的问题,网页本身运行正常,浏览器一直出现警告信息. [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • 使用Vue自定义指令实现Select组件

    本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu

  • 详解Vue用自定义指令完成一个下拉菜单（select组件）

    详解Vue用自定义指令完成一个下拉菜单（select组件）

    这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为

  • JQuery选中select组件被选中的值方法

    jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; 设置select: 设置se

随机推荐