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

更新时间：2022年09月05日 08:48:06 作者：小刘加油！

这篇文章主要介绍了vue select组件绑定的值为数字类型遇到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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>

这样就可以正常渲染！

vue中的绑定值

学习重点

主要介绍一下vue中MVVM的特点。

也就是研究一下这个特点：改变数据的值，页面会跟着改变，页面上的值发生变化，数据也会联动。

我们要学的就是：

Html标签与数据的绑定；
Html标签与属性(CSS样式等)的绑定，；
Html标签与事件(点击事件等)的绑定;

拦截器，给各种绑定设置一个拦截功能(数据需要满足什么情况，才需要绑定？)。

值绑定

使用占位符{{fieldName}}，数据会总动填充到页面上。

使用v-model可以与输入控件(input/select)进行绑定，输入框内的值发生变化，数据也会发生变化。

(v-model的设计就属于MVVM模式)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--数据绑定-->
    <p>{{ message1 }} </p>
    <!--类似InnerHTML-->
    <div v-html="message2"></div>
    <!--双向绑定，输入框与展示的数据进行联动，v-model的值影响data中的值，data中的值再影响<p>标签的值-->
    <input v-model="message1">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message1: 'runoob!',
            message2: '<h>123456</h>',
        }
    })
</script>
</body>
</html>

属性绑定

属性绑定指的是控件自身的属性，例如<a>标签的href属性，使用v-bind进行属性绑定，简写 “:bind”、或者只保留一个 “:”。

后面会发现，其实自定义组件的值，也是通过这种方式进行绑定的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--绑定id属性-->
    <div v-bind:id="rawId"></div>
    <!--绑定href属性-->
    <a v-bind:href="url" rel="external nofollow" >{{name}}</a>
    <!--绑定CSS样式-->
    <div :style="mystyle">{{name}}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            mystyle:'background: #444;color: #eee',
            name: 'baidu',
            url: 'www.baidu.com',
            rawId: 'div_id',
        }
    })
</script>
</body>
</html>

事件绑定

事件和属性的区别，就是事件是一个Function，而属性是一个Object。

语法上有所差别，vue需要在methods中定义事件函数，

使用v-on:click绑定点击事件，简写@click。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--点击事件，v-on表示 监听事件-->
    <button v-on:click="dialog('msg')">Click</button>
    <!--点击事件，v-on表示 监听事件-->
    <button @click="dialog()">Click</button>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'runoob!'
        },
        methods: {
            dialog: function (msg) {
                if (!msg) {
                    alert(this.message);
                } else {
                    alert(msg);
                }
            }
        }
    })
</script>
</body>
</html>

拦截器(filters)

数据绑定之前，对数据计算或者校验，比如说：数值是百分比，显示之前，你需要给它增加一个百分号。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Vue 测试实例</title>
    <style>
        .class1 {
            background: #444;
            color: #eee;
        }
    </style>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--一般的属性绑定不需要拦截器，需要动态改变样式可以使用双向绑定实现-->
    <div :class="{'class1': isShow}">Text</div>
    <div :class="{'class1': true}">Text</div>
    <!--在值绑定中，可以对输入输出进一步处理-->
    <input :value="message2 | formatStr"/>
    <span> {{message2 | formatStr}}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message1: 'msg1',
            message2: 'msg',
            isShow: false
        },
        filters: {
            formatStr: function (value) {
                return value + "%"
            }
        }
    })
</script>
<script>
</script>
</body>
</html>

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

您可能感兴趣的文章:

vue parseHTML 函数拿到返回值后的处理源码解析
这篇文章主要为大家介绍了vue parseHTML 函数拿到返回值后的处理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue在index.html中引入静态文件不生效问题及解决方法
这篇文章主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下
2019-04-04
vue运行卡死的问题
这篇文章主要介绍了vue运行卡死的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue 响应式系统依赖收集过程原理解析
Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表，这篇文章主要介绍了Vue 响应式系统依赖收集过程分析,需要的朋友可以参考下
2022-06-06
Vue中引入svg图标的两种方式
这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue+高德地图实现地图搜索及点击定位操作
这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
VUE+Element-ui实战之使用el-calendar日历自定义显示内容
这篇文章主要介绍了VUE+Element-ui实战之使用el-calendar日历自定义显示内容方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue列表数据发生变化指令没有更新问题及解决方法
这篇文章主要介绍了vue中使用指令，列表数据发生变化指令没有更新问题，本文给出了解决办法,需要的朋友可以参考下
2020-01-01
Vue3双token加密登录及注册方式
本文介绍了双Token机制在Vue3应用中的实现,包括登录/注册、请求拦截、响应拦截、Token存储、退出登录等流程,重点是Token的刷新逻辑和安全性
2025-03-03
Vue3实现九宫格抽奖的示例代码
这篇文章主要为大家详细介绍了如何利用Vue3实现九宫格抽奖的功能，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的可以了解一下
2022-09-09