vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具
编辑好代码后点击 run 即可
2 vue原生写法
2.1 html部分
新增
空 {{ drug.name }} |
刪除 | ||||||
尚未新增任何資料 | |||||||
總金額:{{ totalMoney }} |
{{$data|json}}
2.2 js部分
new Vue({
el: '#app',
data() {
return {
selected: null,
items: [],
// 按照系統正常流程,這邊藥物應該是有個編號值的
// 而且為了統一性,保持資料單一來源也是很重要的
// item 就記住他用了哪個藥物的 id ,再從這裡取得是最保險的做法
drugs: [
{ id: 1, name: 'A藥物', unit: '個', 'price': 5},
{ id: 2, name: 'B藥物', unit: '條', 'price': 6},
{ id: 3, name: 'C藥物', unit: '坨', 'price': 7},
{ id: 4, name: 'D藥物', unit: '顆', 'price': 8},
],
totalMoney: 0
}
},
methods: {
add() {
this.items.push({
drug_id: null,
use: '',
rate: '',
amount: '',
money: 0,
})
},
// 取得藥物
getDrug(drugId) {
if(!drugId) return ""
// 透過 id 取得
return this.drugs.find( d => d.id === drugId)
},
// 計算金額
calculateMoney(item) {
const drug = this.getDrug(item.drug_id)
// 照你的算法~
let money = (parseFloat(drug.price) * parseFloat(item.amount)).toFixed(2)
// 這裡可以簡化成這樣
item.money = isNaN(money) ? parseFloat(0.00) : money
// 任何金額異動就重新計算總金額
this.calculateTotalMoney()
},
// 計算總金額
calculateTotalMoney() {
// 這裡的大致意思是說,從 items 每個元素中取得其 money 值,在進行加總 (reduce)
this.totalMoney = parseFloat(this.items.map( i => parseFloat(i.money)).reduce( (a, b) => (a + b), 0)).toFixed(2)
},
// 選擇藥物時
onSelectedDrug(event,item) {
//打印出绑定的对象
console.log(this.selected.id+""+this.selected.name+""+this.selected.price);
item.drug_id = parseInt(event.target.value)
this.calculateMoney(item)
},
onItemAmountInput(event, item) {
const amount = parseFloat(event.target.value)
// 一樣就不繼續了
if(item.amount === amount) return
// 檢測輸入的是否為數字
if(this.isNumeric(event.target.value)) {
item.amount = amount
// 計算金額
this.calculateMoney(item)
} else {
item.amount = 0
}
},
remove(itemIndex) {
// 刪除
this.items.splice(itemIndex, 1)
// 重新計算總金額
this.calculateTotalMoney()
},
// 簡易的判斷是否為數字的 func
isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
}
})
2.3 css部分
body {
padding: 30px;
}
.add-btn {
margin-bottom: 10px;
}
.right {
text-align: right;
}
.empty {
text-align: center;
font-size: 20px;
color: #e2e2e2;
}
2.4 结果展示
3 element 的下拉框事件
Element
// 1 html
// 2 js
var Main = {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods:{
getValue : function(value){
alert(value.value)
alert(value.label)
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
// 3 css
@import url("//unpkg.com/element-ui@1.4.2/lib/theme-default/index.css");
3.2 代码结果
vue下拉框值改变事件_vue和element ui 下拉框select的change事件相关推荐
- easyui下拉框值改变
EasyUI在web开发中常用到, 下拉框是表单元素的一种, <select id="consumerType" name="consumerType" ...
- easyui前端实现多选框_前端:Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
- 前端:Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
- 在layui中使用 jquery 触发select 的 change事件无效
在layui中使用 jquery 触发select 的 change事件无效 使用layui.use监听select事件 <select lay-filter="demo" ...
- vue下拉框值改变事件_vue下的@change事件
楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下 先上代码 Title 请选择 {{province.text}} 请选择 {{city.text}} new Vue({ el:'#a ...
- vue下拉框值改变事件_下拉框的change事件
$(document).ready(function() { //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法 $("#selectID").c ...
- PyQt5 技术篇-QSpinBox选值框值改变触发事件实例演示,获取QSpinBox组件的值,选值框的边界值设置方法
QSpinBox 组件值改变会触发 valueChanged 事件. # 最大.最小值设置 self.spinBox.setMinimum(1) self.spinBox.setMaximum(3)# ...
- vue获取input焦点事件_vue获取input焦点,弹框后自动获取input焦点
Document 点开弹框1 点开弹框2 取 消 确 定 取 消 确 定 var app = new Vue({ el: '#app', data() { return { id: 'ssssss', ...
- android下拉刷新动画效果代码_vue项目实录:下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
最新文章
- 有勇气的牛排---微信小程序
- 让人想骂街的 Python 炫技操作:条件语句的七种写法
- 吊打奔驰宝马!这个又贵又丑的“玩具”,为何让男人集体高潮?
- 网易发“暴力裁员”内部说明;京东负责不幸员工的孩子费用到22岁;Linux kernel 5.4发布 | 极客头条...
- ActiveMQ学习(四)——应用程序接口
- 布谷鸟优化算法 matlab,布谷鸟算法(Cuckoo Search,CS)MATLAB案例详细解析
- proteus仿真常见问题
- html语言制作留言条,html怎么操作来实现留言板样式?(代码示例)
- 计算机逻辑判断函数函数知识点,逻辑判断函数
- python中oserror_[python] 解决OSError: Address already in use
- H3C S5720交换机系统文件丢失一直重启的解决办法
- 网络性能应用检测系统
- 数据可视化分析平台开源方案集锦
- Hbuilder 连接MuMu模拟器
- ExecuteError: 执行失败。参数无效。 ERROR 000732
- 用类模板实现容器存储自定义数据类型(类似于STL里面的vector)
- easyui常用图标
- 深入原理64式:22 docker知识总结
- 基于UMAT的低密度泡沫本构实现
- 京东广告数据与算法部2023届/2024届招聘实习生
热门文章
- java句柄数过高怎么解决_主播个人及企业利润高,个税或企业所得税怎么解决...
- linux和mysql重点哪个_重要的MySQL 文档存储知识点扫盲
- 连接池超时配置_HttpClient连接池的一些思考
- PHP使用SMTP邮件服务器
- datatable 如何修改 某行 某列 的 字体颜色
- react 父子组件之间相互传值
- 查看静态库(.lib)和动态库(.dll)的导出函数的信息
- QString与char *之间的转换
- [Redux/Mobx] Mobx和Redux有什么区别?
- React开发(132):ant design学习指南之form中控制展开和关闭逻辑