Vuewatch实时计算器

互联网
2025-08-18 16:54:01

watch实时计算器

可以自己选择+、-、*、÷

参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src=" cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script> </head> <body> <div id="app">  <input type="text" v-model="n.v1" > <select name="" id="" v-model="n.type" > <option value="+" >+</option> <option value="-">-</option> <option value="*">×</option> <option value="/">÷</option> </select> <input type="text" v-model="n.v2" > <button>=</button> <span >{{n.v3}}</span> </div> <script> new Vue({ el:"#app", data:{ n:{ v1:1, v2:1, v3:2, type:"+", } }, watch:{ "n":{ //执行handler函数固定写法 handler(nval){ this.n.v3 = eval(this.n.v1+this.n.type+this.n.v2); }, deep:true, } } }) </script> </body> </html> 效果展示

标签：

Vuewatch实时计算器由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Vuewatch实时计算器”

上一篇
C语言每日一题(9)：跳水比赛猜名次

下一篇
防火墙基础