利用Vue.js写的一个简单的计算器。非常简单的案例。
通过这个案例,练习一下Vue的语法。
通过案例可以看的出,Vue.js解放了DOM操作。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue计算器& lt;/title>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;输入类型="数量" v模型=皀um1”比;
& lt;选择v模型="操作"比;
& lt;选项值=" https://www.yisu.com/zixun/0 "祝辞+ & lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/1 "祝辞& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/2 "祝辞* & lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/3 "祝辞/& lt;/option>
& lt;/select>
& lt;输入类型="数量" v模型=皀um2”比;
& lt;按钮@click="计算"祝辞=& lt;/button>
& lt; strong>{{结果}}& lt;/strong>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/node_modules/vue/dist/vue.js "祝辞& lt;/script>
& lt; script>
新Vue ({
埃尔:“#应用”,
数据:{
操作:“0”,
结果:“0”,
num1:0,
num2:0,
},
方法:{
计算:函数(){
开关(this.operation) {
例“0”:
这一点。结果=方法(this.num1) +方法(this.num2);
打破;
案例1:
这一点。结果=this.num1-this.num2;
打破;
“2”:
这一点。结果=this.num1 * this.num2;
打破;
“3”:
这一点。结果=this.num1/this.num2;
打破;
}
}
}
})
& lt;/script>
& lt;/body>
& lt;/html>
截的图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
