介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title>计算器& lt;/title>
,& lt; script src=癶ttps://unpkg.com/vue/dist/vue.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
,& lt; input 类型=皌ext", v模型=皀1"比;
,& lt; select v模型=皁pt"比;
& lt;才能option 价值=?“祝辞+ & lt;/option>
& lt;才能option 价值=安澄?祝辞& lt;/option>
& lt;才能option 价值=?“祝辞* & lt;/option>
& lt;才能option 价值=?白４?& lt;/option>
,& lt;/select>
,& lt; input 类型=皌ext", v模型=皀2"比;
,& lt; input 类型=癰utton", value=?? @click=癱alc"比;
,& lt; input 类型=皌ext", v模型=皉esult"比;
& lt;/div>
& lt; script>
Vue ({new
,el: & # 39; #应用# 39;
,数据:{
,,n1: 0,
,,n2: 0,
,,结果:0,
,,选择:& # 39;+ & # 39;
},
,方法:{
calc才能(),{
,,switch (this.opt), {
,,,case “+“:
,,,,this.result =,方法(this.n1), +,方法(this.n2);
,,,,休息;
,,,case “产生绯闻;
,,,,this.result =,方法(this.n1),安康;方法(this.n2);
,,,,休息;
,,,case “*”:
,,,,this.result =,方法(this.n1), *,方法(this.n2);
,,,,休息;
,,,case “/?
,,,,this.result =,方法(this.n1),/,方法(this.n2);
,,,,休息;
,,}
,,}
,}
})
& lt;/script>
& lt;/body>
& lt;/html>
小编给大家分享一下vue怎么实现计算器功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
vue实现计算器功能的具体代码如下
效果图:
看完了这篇文章,相信你对“vue怎么实现计算器功能”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
