您现在的位置是：首页 > 技术教程 正文

用Vue的三种方法实现加减乘除运算

admin 阅读： 2024-03-28
后台-插件-广告管理-内容页头部广告（手机）

js插件：vue.js

教程：

首先在工具内引入vue.js

  1. <head>
  2. <meta charset="utf-8" />
  3. <script src="js/vue.js"></script>
  4. </head>

然后在body里面创建一个div并设置id，我这里给id命名为"app"

在id命名为"app"的div内使用input标签和select标签来设置运算框

然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算

第一种computed方法：

  1. <input type="text" placeholder="输入第一个数" v-model.number="num1">
  2. <select v-model="sign">
  3. <option>+</option>
  4. <option>-</option>
  5. <option>*</option>
  6. <option>/</option>
  7. </select>
  8. <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
  9. 结果是:{{num1}}{{sign}}{{num2}}={{res}}

接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div

然后为每个input标签和select标签设置对应的data属性

并且写入方法computed：

  1. <script>
  2. const vm = new Vue({
  3. el: "#app"，
  4. data: {
  5. num1:0,
  6. num2:0,
  7. sign:"+",
  8. res：0
  9. }，
  10. computed:{
  11. res(){
  12. if(this.sign === "+") {
  13. return this.num1 + this.num2;
  14. } else if(this.sign === "-") {
  15. return this.num1 - this.num2;
  16. } else if(this.sign === "*") {
  17. return this.num1 * this.num2;
  18. } else if(this.sign === "/"){
  19. return this.num1 / this.num2;
  20. }
  21. }
  22. },
  23. ）}
  24. </script>

第二种 watch(侦听器)方法：

然后在body里面创建一个div并设置id，我这里给id命名为"app"

在id命名为"app"的div内使用input标签和select标签来设置运算框

  1. <input type="text" placeholder="输入第一个数" v-model.number="num3">
  2. <select v-model="sign1">
  3. <option>+</option>
  4. <option>-</option>
  5. <option>*</option>
  6. <option>/</option>
  7. </select>
  8. <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
  9. 结果是:{{res}} <br>
  1. <script>
  2. const vm = new Vue({
  3. el: "#app"，
  4. data: {
  5. num1:0,
  6. num2:0,
  7. sign:"+",
  8. res：0
  9. }， watch:{
  10. num1(val){
  11. if(this.sign === "+") {
  12. this.res = val + this.num2;
  13. } else if(this.sign === "-") {
  14. this.res = val - this.num2;
  15. } else if(this.sign1 === "*") {
  16. this.res = val * this.num2;
  17. } else if(this.sign1 === "/"){
  18. this.res = val / this.num2;
  19. }
  20. },
  21. num2(val){
  22. if(this.sign === "+") {
  23. this.res = this.num1 + val;
  24. } else if(this.sign1 === "-") {
  25. this.res = this.num1 - val;
  26. } else if(this.sign1 === "*") {
  27. this.res = this.num1 * val;
  28. } else if(this.sign1 === "/"){
  29. this.res = this.num1 / val;
  30. }
  31. },
  32. sign(val){
  33. if(val === "+") {
  34. this.res = this.num1 + this.num2;
  35. } else if(val === "-") {
  36. this.res = this.num1 - this.num2;
  37. } else if(val === "*") {
  38. this.res = this.num1 * this.num2;
  39. } else if(val === "/"){
  40. this.res = this.num1 / this.num2;
  41. }
  42. }
  43. }
  44. ）}
  45. </script>

第三种methods方法：

 在body里面创建一个div并设置id，我这里给id命名为"app"

在id命名为"app"的div内使用input标签和select标签来设置运算框

  1. <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
  2. <select v-model="sign2" @change="change">
  3. <option>+</option>
  4. <option>-</option>
  5. <option>*</option>
  6. <option>/</option>
  7. </select>
  8. <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
  9. 结果是:{{num5}}{{sign2}}{{num6}}={{res}}
  1. <script>
  2. const vm = new Vue({
  3. el: "#app"，
  4. data: {
  5. num1:0,
  6. num2:0,
  7. sign:"+",
  8. res：0
  9. }，methods:{
  10. change(){
  11. if(this.sign2 === "+") {
  12. this.res = this.num1 + this.num2;
  13. } else if(this.sign === "-") {
  14. this.res = this.num1 - this.num2;
  15. } else if(this.sign === "*") {
  16. this.res = this.num1 * this.num2;
  17. } else if(this.sign === "/"){
  18. this.res = parseInt(this.num1) / parseInt(this.num2);
  19. }
  20. }
  21. },
  22. ）}
  23. </script>

然后运行

效果图

 源代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="js/vue.js"></script>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <input type="text" placeholder="输入第一个数" v-model.number="num1">
  10. <select v-model="sign">
  11. <option>+</option>
  12. <option>-</option>
  13. <option>*</option>
  14. <option>/</option>
  15. </select>
  16. <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
  17. 结果是:{{num1}}{{sign}}{{num2}}={{res}} <br>
  18. <input type="text" placeholder="输入第一个数" v-model.number="num3">
  19. <select v-model="sign1">
  20. <option>+</option>
  21. <option>-</option>
  22. <option>*</option>
  23. <option>/</option>
  24. </select>
  25. <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
  26. 结果是:{{num3}}{{sign1}}{{num4}}={{res1}} <br>
  27. <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
  28. <select v-model="sign2" @change="change">
  29. <option>+</option>
  30. <option>-</option>
  31. <option>*</option>
  32. <option>/</option>
  33. </select>
  34. <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
  35. 结果是:{{num5}}{{sign2}}{{num6}}={{res2}}
  36. </div>
  37. <script>
  38. const vm = new Vue({
  39. el: "#app",
  40. data: {
  41. num1:0,
  42. num2:0,
  43. sign:"+",
  44. res:"0",
  45. num3:0,
  46. num4:0,
  47. sign1:"+",
  48. res1:"0",
  50. num5:0,
  51. num6:0,
  52. sign2:"+",
  53. res2:"0"
  54. },
  55. methods:{
  56. change(){
  57. if(this.sign2 === "+") {
  58. this.res2 = this.num5 + this.num6;
  59. } else if(this.sign2 === "-") {
  60. this.res2 = this.num5 - this.num6;
  61. } else if(this.sign2 === "*") {
  62. this.res2 = this.num5 * this.num6;
  63. } else if(this.sign2 === "/"){
  64. this.res2 = parseInt(this.num5) / parseInt(this.num6);
  65. }
  66. }
  67. },
  68. computed:{
  69. res(){
  70. if(this.sign === "+") {
  71. return this.num1 + this.num2;
  72. } else if(this.sign === "-") {
  73. return this.num1 - this.num2;
  74. } else if(this.sign === "*") {
  75. return this.num1 * this.num2;
  76. } else if(this.sign === "/"){
  77. return this.num1 / this.num2;
  78. }
  79. }
  80. },
  81. watch:{
  82. num3(val){
  83. if(this.sign1 === "+") {
  84. this.res1 = val + this.num4;
  85. } else if(this.sign1 === "-") {
  86. this.res1 = val - this.num4;
  87. } else if(this.sign1 === "*") {
  88. this.res1 = val * this.num4;
  89. } else if(this.sign1 === "/"){
  90. this.res1 = val / this.num4;
  91. }
  92. },
  93. num4(val){
  94. if(this.sign1 === "+") {
  95. this.res1 = this.num3 + val;
  96. } else if(this.sign1 === "-") {
  97. this.res1 = this.num3 - val;
  98. } else if(this.sign1 === "*") {
  99. this.res1 = this.num3 * val;
  100. } else if(this.sign1 === "/"){
  101. this.res1 = this.num3 / val;
  102. }
  103. },
  104. sign1(val){
  105. if(val === "+") {
  106. this.res1 = this.num3 + this.num4;
  107. } else if(val === "-") {
  108. this.res1 = this.num3 - this.num4;
  109. } else if(val === "*") {
  110. this.res1 = this.num3 * this.num4;
  111. } else if(val === "/"){
  112. this.res1 = this.num3 / this.num4;
  113. }
  114. }
  115. }
  116. })
  117. </script>
  118. </body>
  120. </html>
  121. ————————————————
  122. 版权声明：本文为CSDN博主「hu15137376135」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
  123. 原文链接：https://blog.csdn.net/hu15137376135/article/details/129914536

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表