银川微信小程序商城_vue完成简略加法核算器

vue实现简单加法计算器     .   这篇文章主要为大家详细介绍了vue实现简单加法计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现简单加法计算器的具体代码,供大家参考,具体内容如下

只需要简单两步

1.模板结构,设计界面
2.处理数据和控制逻辑

代码:

 !DOCTYPE html 
 html 
 head 
 title /title 
 /head 
 body 
 div id="app" 
 div 
 h1 简单计算器 /h1 
 div 
 span 数值A: /span 
 span 
 input type="text" v-model='a' //通过v-model指令实现数值a的绑定
 /span 
 /div 
 div 
 span 数值B: /span 
 span 
 input type="text" v-model='b' //通过v-model指令实现数值b的绑定
 /span 
 /div 
 div 
 button @click='handle' 计算 /button 
 /div 
 div 
 span 计算结果: /span 
 span v-text='result' /span 
 /div 
 /div 
 /div 
 script type="text/javascript" src="vue.js" /script 
 script type="text/javascript" 
 var vm = new Vue({
 el: '#app',
 data: {
 a: '',
 b: '',
 result:''
 methods: {
 handle: function(){
 //实现逻辑计算
 this.result = parseInt(this.a) + parseInt(this.b);
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读