文化馆网站数字化建设介绍,阜宁建设网站的公司,定制手机软件,可信网站的认证1 在线编辑测试工具编辑好代码后点击 run 即可2 vue原生写法2.1 html部分新增空{{ drug.name }}刪除尚未新增任何資料總金額#xff1a;{{ totalMoney }}{{$data|json}}2.2 js部分new Vue({el: #app,data() {return {selected: null,items: [],// 按照系統正常流程#xff0c…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.idthis.selected.namethis.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()},// 簡易的判斷是否為數字的 funcisNumeric(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 jsvar 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 cssimport url(//unpkg.com/element-ui1.4.2/lib/theme-default/index.css);3.2 代码结果
