v-model的小案例---计算器的实现

最新推荐文章于 2022-03-24 17:34:14 发布
原创 最新推荐文章于 2022-03-24 17:34:14 发布 · 316 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #html

这篇博客介绍了两种使用Vue.js创建简单计算器的方法。第一种通过switch语句进行计算，第二种利用eval函数动态执行计算表达式。这两种方法展示了Vue如何结合HTML和JavaScript处理用户输入并进行动态计算。

第一种方法:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">

        <!-- 输入的一个数字 -->

        <input type="text" v-model="n1">

        <!-- 符号的获取+ - * / -->

        <select v-model="opt">

            <option value="+">+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

        </select>

        <!-- 第二个数字的获取 -->

        <input type="text" v-model="n2">

        <!-- 点击等号算出结果 -->

        <button @click="calc">=</button>

        <!-- 最终的计算结果 -->

        <input type="text" v-model="result">

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

            },

            methods: {

                calc() {

                    switch (this.opt) {

                        case '+':

                            this.result = Number(this.n1) + Number(this.n2)

                            break;

                        case '-':

                            this.result = Number(this.n1) - Number(this.n2)

                            break;

                        case '*':

                            this.result = Number(this.n1) * Number(this.n2)

                            break;

                        case '/':

                            this.result = Number(this.n1) / Number(this.n2)

                            break;

                    }

                }               

            }

        })

    </script>

第二种方法:

 

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">

        <!-- 输入的一个数字 -->

        <input type="text" v-model="n1">

        <!-- 符号的获取+ - * / -->

        <select v-model="opt">

            <option value="+">+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

        </select>

        <!-- 第二个数字的获取 -->

        <input type="text" v-model="n2">

        <!-- 点击等号算出结果 -->

        <button @click="calc">=</button>

        <!-- 最终的计算结果 -->

        <input type="text" v-model="result">

    </div>

new Vue({

            el: "#app",

            data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

            },

            methods: {

                calc() {                 

                    calc(){

                     var codestr='Number(this.n1) '+this.opt+ 'Number(this.n2)'

                     this.result=eval(codestr)

                    }

            }

        })

    </script>

Vue实践--v-model实现简易计算器
Lawless
04-22 641
最终效果： 暂时写这样，9键键盘输入数字正在编辑中..... 话不多说，直接上demo： 页面渲染： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
Vue · v-model实现简易计算器
chez-moi
03-12 1038
通过用v-model来实现简易计算器 【代码实现】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dis...
v-model实现一个简易版的计算器,vue
qq_41117240的博客
10-17 538
首先要导入vue的包，利用v-model的数据双向绑定实现 简易版计算器
使用v-model实现简易计算机
Socraton的博客
12-24 266
<div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-<...
v-model制作简易计算器
Wrj6811的博客
11-04 515
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
Vue.js02之常用标签v-model及计算器案例
autumn_leaf blog
03-27 893
本次我们继续讲解Vue.js的常用指令，并且我们会用所学的知识来写一个计算器的小案例帮助大家巩固新的知识。 首先我们先来一段新的代码，代码如下： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"&...
V-mode双向数据绑定
ALI_SAf的博客
09-28 430
v-bind只能是想数据的单行绑定（M→V） v-model可以实现表单元素和model中数据的双向绑定。 注意：v-model只能运用在表单元素（input（radio，text，address，email……）select checkbox textarea）中。 案例简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=
Vue实现简单计算器案例
10-15
### Vue实现简单计算器案例知识点详细解析 #### Vue.js框架简介 Vue.js是一个构建用户界面的渐进式JavaScript框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于...
vue3 实现 计算器案例
前端开发小白9527
03-24 3170
注：功能并不完整，主要练习vue3的书写方式 <template> <h3 class="title">计算器</h3> <div class="MyComputed"> <div class="result"> <div class="text"> <el-tag type="" v-model="result">{{ result }}</el-tag>
【前端框架学习】实验二 使用v-model实现简易计算器
Jerry‘s word
01-14 407
方法一： <body> <div id="app"> <input type="text" v-model='n1'> <select v-model='opt'> <option value="+">+</option> <option value="-">-</option> <optio
Vue的v-model实现简单的计算器
weixin_44684357的博客
06-28 577
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- v
Vue的学习之路六：使用v-model制作简易计算器
神薯片
05-23 535
<body> <div id="app"> <input type="text" name="" id="" v-model="n1" /> <select name="" id="" v-model="opt"> <option value="+">+</option> <option value="-">-</option> ..
用v-modle做一个简单的计算器
qq_42309685的博客
08-13 244
效果如下： 代码如下（代码里没有引入vue库，注意）： <div id="app"> <input type="text" v-model = "n1"> <select v-model = "opt"> <option value="+">+</option> <option value="-">-&l...
v-model实现简单计算器
weixin_45616246的博客
04-05 539
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&...
使用 v-model实现计算器案例
weixin_34393428的博客
02-25 210
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-com...
使用v-model和eval函数实现我的计算器
weixin_43803985的博客
07-29 581
在实现我的计算器小程序中，需要注意以下几个细节 v-model：使用的格式为 v-model=" "。使用等于号 在下拉列表中option要写上 value=" " 在script中的methods方法中，使用data中的数据，要使用this关键字，否则不能识别 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。虽然可以简化代码，但不支持多次使用 实例，使用sw...
Vue v-model双向数据绑定和一个简单的整数计算器
AllenWalker1936的博客
04-18 798
一、v-model双向数据绑定 方法 v-bind - 单向数据绑定（从M到V） v-model - 双向数据绑定 例子 <input type="text" v-bind:value="msg" style="width:200px">//单向 <input type="text" v-model="msg" style="width:200px">//双向 TI...
Vue学习笔记01day_06.简易计算器
xinpz的博客
09-11 292
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
05-v-model简易计算器
qq_42138430的博客
03-05 336
05- v-model简易计算器 在这里插入代码片 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&
uni-app小型项目应用软件
最新发布
04-25
### 关于 UniApp 小型项目实战案例与开发教程 #### 1. **UniApp 小型项目推荐** 对于希望快速上手并积累实践经验的开发者而言，选择合适的小型项目至关重要。以下是一些适合初学者尝试的经典小型项目案例： - **待办事项列表（To-Do List）** 这是最经典的前端练习项目之一，可以帮助开发者熟悉数据绑定、事件监听以及页面渲染机制。通过这个项目，可以深入了解 Vue.js 的双向绑定特性以及 UniApp 对其的支持方式[^3]。 ```javascript data() { return { todos: [], newTodo: '' }; }, methods: { addTodo() { if (this.newTodo.trim()) { this.todos.push({ text: this.newTodo, completed: false }); this.newTodo = ''; } }, toggleCompleted(index) { this.$set(this.todos[index], 'completed', !this.todos[index].completed); } } ``` 以上代码片段展示了如何动态更新待办事项列表，并通过 `v-model` 绑定输入框内容。 --- #### 2. **天气查询应用** 这是一个实用性强且易于实现的小型项目。主要功能包括获取当前城市天气状况、未来几天预报等信息。该项目涉及 API 请求处理、异步编程技巧等方面的知识点[^2]。 示例代码如下所示： ```javascript async getWeatherData(cityName) { try { const response = await uni.request({ url: `https://api.weather.com/.../${cityName}`, method: 'GET' }); console.log('Weather Data:', response.data); return response.data; } catch (error) { console.error('Error fetching weather data:', error.message); } } ``` 此处使用了 `uni.request()` 方法发起 HTTP GET 请求调用外部气象服务接口。 --- #### 3. **简易计算器** 制作一个简单的四则运算计算器也是不错的练手机会。它可以锻炼界面设计能力以及逻辑判断思维模式。同时还能进一步巩固对按钮点击回调函数的认识程度[^1]。 --- #### 4. **图片上传分享工具** 随着社交媒体日益普及，在线照片编辑与分发成为大众日常生活中不可或缺的一部分。因此创建这样一个轻量级的照片管理解决方案无疑具备很高的现实意义价值所在之处[^3]。 关键部分可能涉及到文件读取保存操作： ```javascript function uploadImage(filePath) { return new Promise((resolve, reject) => { uni.uploadFile({ url: 'http://your-server/upload', filePath, name: 'file', success(res) { resolve(JSON.parse(res.data)); }, fail(err) { reject(err); } }); }); } ``` --- ### 结语 通过参与这些精心挑选出来的迷你工程项目训练营活动，相信每位学员都能够更加深刻体会到 UniApp 所带来的便捷高效体验感！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值