vue 计算器,vue.js计算器
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单计算器的具体代码，供大家参考，具体内容如下
案例需求
案例思路
1、通过v型车指令实现数值A和数值B的绑定
2、给计算按钮绑定事件，实现计算逻辑
3、将计算结果绑定到对应位置
实现静态页面
div id=应用程序
氕简单计算器/h1
divspan数值a:/spanspaninput type= text v-model= a /span/div
divspan数值b:/span span type= text v-model= b /span/div
分割按钮计算/按钮/div
divspan计算结果spanspan/span/div
/div
导入某视频剪辑软件
脚本类型= text/JavaScript src= js/vue。js /脚本
为静态页面添加指令
div id=应用程序
氕简单计算器/h1
divspan数值A:/span
跨度
输入类型=text v-model=a
/span
/div
差异
跨度数值B:/span
跨度
输入类型=text v-model=b
/span
/div
差异
按钮v-on:click=handle 计算/按钮
/div
divspan计算结果/span span v-text= result /span/div
/div
设置计算功能
脚本类型=文本/javascript
/* */
var vm=new Vue({
埃尔： #app ，
数据：{
答： ,
乙： ,
结果：""
},
方法：{
handle: function () {
//实现计算逻辑
这个。结果=parse int(this。a)解析int(this。b)；
}
}
});
/脚本
最终代码
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题简单计算器/标题
/头
身体
div id=应用程序
氕简单计算器/h1
divspan数值A:/span
跨度
输入类型=text v-model=a
/span
/div
差异
跨度数值B:/span
跨度
输入类型=text v-model=b
/span
/div
差异
按钮v-on:click=handle 计算/按钮
/div
divspan计算结果/span span v-text= result /span/div
/div
脚本类型= text/JavaScript src= js/vue。js /脚本
脚本类型=文本/javascript
/* */
var vm=new Vue({
埃尔： #app ，
数据：{
答： ,
乙： ,
结果：""
},
方法：{
handle: function () {
//实现计算逻辑
这个。结果=parse int(this。a)解析int(this。b)；
}
}
});
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。