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

来源: 银川微信小程序商城      作者:jianzhan      发布时间:
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

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


相关阅读