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 代码结果