vue select组件绑定的值为数字类型遇到的问题
目录
- select组件绑定的值为数字类型问题
- vue中的绑定值
- 学习重点
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 el-select绑定对象时,回显内容不正确,始终是最后一项的解决
目录 一.问题描述 二.原因分析和解决方法 三.总结 el-select绑定对象时,回显内容始终是最后一项 一.问题描述 使用el-select组件绑定类型为对象时,回显内容始终为选项的最后一项,但是通过控制台打印的信息却是所选项. 使用代码: <template> <div class="page-index"> <el-form :model="ruleForm" :rules="rul
-
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关于select组件绑定的值为数字类型的问题
目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为
-
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的协同绑定操作
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绑定多个值
目录 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组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q
-
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 select组件的使用与禁用实现代码
业务:消息推送方式有两种,为"微信"和"邮件",微信发送时需要选择"要发送的应用程序",邮件发送时不需要 微信发送时,页面如下: 邮件发送时,选择器不可用,页面如下: 虽然官网上没有给出具体的例子,但可从属性中查到 "disabled"属性, 属性 说明 类型 默认值 disabled 是否禁用 Boolean false 实现: 添加disabled属性,写成如下红色标记格式:定义一个isAble变量,用来存放TRUE和FA
-
浅谈vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)
-
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子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
最近开始在用elementUI做一个后台管理系统项目,遇到一个问题,需求是这样,在父组件有一个按钮,点击按钮会显示弹窗(子组件),在子组件中用的是elementUI 的el-diolog弹窗组件,在关闭弹窗时(elementUI自带事件)便会报错.话不多说直接上代码. DEMO 这是父组件的代码: <template> <div> <app-refund :dialogVisible="refundVisible"></app-refund&g
-
使用Vue自定义指令实现Select组件
本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu