使用vue.js实现一款简易计算器可多则混合运算（加减乘除）

最新推荐文章于 2023-10-25 12:37:33 发布

原创

最新推荐文章于 2023-10-25 12:37:33 发布 · 1.7k 阅读

收录于

当前文章被以下社区和专栏收录：

该文章介绍了如何在Vue.js应用中使用v-model进行双向数据绑定，结合methods和计算属性实现输入表单的实时计算功能。用户输入数字和选择运算符后，通过点击按钮触发计算方法，自动计算并显示结果。

一、普通方法

通过methods中自定义方法，然后在input表单上通过v-model进行双向绑定，实现实时更新计算结果

<div id="app">
    <input type="text" v-model="number1" placeholder="请输入第一个数">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="number2" placeholder="请输入第二个数">
    <input type="button" value="=" @click="calculator">
    <input type="text" v-model="result">
</div>

二、通过methods计算属性

将计算结果设定为一个methods计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。

<script type="text/javascript">
    // 创建 Vue 实例，得到 ViewModel，简写vm
    var vm = new Vue({
        el: "#app",
        data: {
            number1: 0,
            number2: 0,
            opt: '+',

标签