Vue watch实时计算器

watch实时计算器

可以自己选择+、-、*、÷

参考代码

DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js">script>
head>
<body>
<div id="app">
  
  <input type="text" v-model="n.v1" >
  <select name="" id=""  v-model="n.type" >
    <option value="+" >+option>
    <option value="-">-option>
    <option value="*">×option>
    <option value="/">÷option>
  select>
  <input type="text"  v-model="n.v2"  >
  <button>=button>
  <span >{{n.v3}}span>
div>
<script>
  new Vue({
    el:"#app",
    data:{
      n:{
        v1:1,
        v2:1,
        v3:2,
        type:"+",
      }

    },
    watch:{
      "n":{
        //执行handler函数  固定写法
        handler(nval){
          this.n.v3 = eval(this.n.v1+this.n.type+this.n.v2);
        },
        deep:true,

      }
    }
  })
script>
body>
html>

效果展示

在这里插入图片描述

你可能感兴趣的:(vue.js,vue.js,javascript,前端)