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="https://www.atool.online/article/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="https://www.atool.online/article/res/vue.js"></script> </head> <body> <div id="app"> <!--绑定id属性--> <div v-bind:id="rawId"></div> <!--绑定href属性--> <a v-bind:href="https://www.atool.online/article/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="https://www.atool.online/article/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="https://www.atool.online/article/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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。