首页 > 其他 > 详细

案例:简单计算器

时间:2020-06-11 21:42:00      阅读:45      评论:0      收藏:0      [点我收藏+]

技术分享图片

实现功能:

需求:实现简单的加法计算,分别输入数值a和数值b,点击计算按钮,结果显示在下面。 

① 通过v-model指令实现数值a和数值b的绑定
② 给计算按钮绑定事件,实现计算逻辑
③ 将计算结果绑定到对应位置

<div id="app">
    <h1>简单计算器</h1>
    <div>
      <span>数值A:</span>
      <span>
        <input type="text" v-model=‘a‘>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model=‘b‘>
      </span>
    </div>
    <div>
      <button v-on:click=‘handle‘>计算</button>
    </div>
    <div>
      <span>计算结果:</span>
      <span v-text=‘result‘></span>
    </div>
</div>
<script type="text/javascript" src="js/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>

 

案例:简单计算器

原文:https://www.cnblogs.com/zcy9838/p/13096175.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!