用vue做一个简单的网页计算器

yxnwx

已于 2023-04-02 20:32:45 修改

阅读量620

点赞数

文章标签： vue.js 前端 javascript

于 2023-04-02 18:32:49 首次发布

本文链接：https://blog.csdn.net/yxnwx/article/details/129914541

版权

本文档将指导你如何使用Vue.js框架构建一个基本的网页计算器。通过引用Vue.js库，定义输入框、操作符号及下拉菜单，并利用v-model进行数据双向绑定。接着，我们将介绍如何设置运算方法和计算属性，以及使用Vue的监听器watch来实时更新计算结果。

摘要由CSDN通过智能技术生成

一：代码实现

1：首先引用vue

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

2：然后定义input，符号与下拉栏。用v-model进行双向绑定。

<body>
    <div id="app">
        <input type="text" placeholder="请输入第一个操作数" v-model.number="num1" />
        <select v-model="opt">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第一个操作数" v-model.number="num2" />
        <button @click="nnn">计算</button><br>
        <strong>{
  {result}}</strong> <br>
        <strong>{
  {yyy}}</strong> <br>
        <strong>{
  {ans}}</strong>