使用 Vue 方法，计算属性，监听器完成简易计算器

zhlong666

已于 2023-04-02 20:57:44 修改

阅读量174

点赞数 1

文章标签： vue.js javascript 前端

于 2023-04-02 20:49:13 首次发布

本文链接：https://blog.csdn.net/zhlong666/article/details/129916070

版权

一、思路

方法：

定义一个方法，可以计算结果
给input添加@input事件

计算属性：

定义一个方法，可以计算结果
定义计算属性
在计算属性的get方法中调用方法

监听器：

定义一个方法，可以计算结果
监听属性变化
在属性变化时调用方法计算结果

二、实现过程

第一种：Vue方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数" v-model.number="number1"  />
            <select>
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type ="text" placeholder="请输入第二个数" v-model.number="number2" />
            <br/>
            和：{
  {number1+number2}}
            差：{
  {number1-number2}}
            积：{
  {number1*number2}}
            商：{