Vue.js初学—简易计算器（监听input的输入值变化事件，从而实现结果的动态刷新）

最新推荐文章于 2023-12-30 10:04:20 发布

原创

最新推荐文章于 2023-12-30 10:04:20 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用Vue.js实现简易计算器的动态刷新功能，详细讲解了两种方法：一是通过@keyup事件监听键盘输入并调用sum()方法；二是利用v-on:input指令，在输入值变化时直接触发sum函数，实现结果的实时更新。

共采用两种方式来实现，通过监听input输入值的变化，调用methods中的函数，来进行动态运算。

1.@keyup="sum()"。

2.v-on:input="sum"（需注意input方法函数后面不需要括号）。

<script src="./script/vue.js"></script>

<div id="app">
        <input type="text" v-model="num1" @keyup="sum()">
        <select v-model="selected" name="" @click="sum()">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2" v-on:input="sum">
        ={
  
  {result}}
    </div>

 <script>
        new Vue({
            el:'#app',
            data:{
                selected:'+',
                num1:0,
                num2:0,
                result:0
            },
            methods:{
                sum:function(){