vue簡易計算機-コード虫があなたを連れて飛ぶ
3469 ワード
簡易コンピュータケース
1.HTMLコード構造
2.vueインスタンスコード
1.HTMLコード構造
"app">
type="text" v-model="n1">
type="text" v-model="n2">
type="button" value="=" v-on:click="getResult">
type="text" v-model="result">
2.vueインスタンスコード
// Vue , ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '0'
},
methods: {
getResult() {
switch (this.opt) {
case '0':
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '1':
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case '2':
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case '3':
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
}
});