教你用Vue做一个简单网页计算器

二、案例描述

1、考核知识点
2、创建vue实例和对v-model内置指令的使用
3、练习目标
创建vue实例。
掌握v-model内置指令的使用。
4、需求分析
用户通过选择计算方法和数据输入，得到计算结果。
5、案例分析

效果如图所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器</title><script src="vue.js"></script><style>.result{font-size: 30px;}</style>
</head>
<body><div id="app"><!-- 定义页面结构 --><div class="calc"><input type="radio"  value="1" v-model="fuhao"/>加法<input type="radio"  value="2" v-model="fuhao"/>减法<input type="radio"  value="3" v-model="fuhao"/>乘法<input type="radio"  value="4" v-model="fuhao"/>除法<ul><li>数据1：<input type="text" v-model="num1"></li><li>数据2：<input type="text" v-model="num2"></li><li><input type="button" value="计算" @click='calc()'></li></ul><div class="result">结果：{{result}}</div></div>    </div><script>var vm = new Vue({el: '#app',// 定义初始数据data: {fuhao: '1',num1: '',num2: '',result: ''},// 定义事件处理函数Calcmethods: {calc() {if (!this.num1 || !this.num2) {this.result = '输入的数不能为空'} else {if (this.fuhao == 1) {this.result = parseInt(this.num1) + parseInt(this.num2)}if (this.fuhao == 2) {this.result = parseInt(this.num1) - parseInt(this.num2)}if (this.fuhao == 3) {this.result = parseInt(this.num1) * parseInt(this.num2)}if (this.fuhao == 4) {this.result = parseInt(this.num1) / parseInt(this.num2)}}}}})</script>
</body>
</html>

有用的话点个赞吧！

教你用Vue做一个简单网页计算器相关推荐

教你用Vue 做一个简单的比较两个数字的大小的页面
一.案例描述 1. 考核知识点创建vue实例和对v-model内置指令的使用 2. 练习目标创建vue实例. 掌握v-model内置指令的使用. 3. 需求分析用户输入的两个数据,得到其大小返回 ...
做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
Java怎么做一个简单网页呢？
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
vue设置一个简单的计算器
vue设置一个简单的计算器 <div id="app"><input type="text" v-model="n1"&g ...
用c++做一个简单的计算器
用C++做一个简单的计算器本教程的主要内容是如何使用C++做一个简单的计算器.它可以实现最基本的计算功能,提供5种计算方式. 全部代码如下: #include <iostream> // ...
java如何做网页_java怎么做一个简单网页？网页包括什么？
学了java程序之后,大家就可以将这些运用到生活中去,比如做一个简单的网页.正好也可以检测自己学了怎么样,那么接下来,我们就来给大家讲解一下这方面的内容. 用Java语言编写实现一个简单的WEB浏览器 ...
用html5做一个简单网页_用新款ws2812灯带做一个简单的窗花
本文转自:DF创客社区-未经许可不可转载原文链接(附件请于原文下方下载): 用新款ws2812灯带做一个简单的窗花-创意生活论坛-DF创客社区mc.dfrobot.com.cn 作者:屌丝王小明 ...
Windows10 手机应用程序开发 - 3. 做一个简单的计算器界面
2019独角兽企业重金招聘Python工程师标准>>> 目标:完成一个简单的计算器的界面,暂时不做点击处理,主要联系UI布局. 步骤: 1.创建一个空的windows phone 项 ...
php编写一个简单计算器程序,PHP做一个简单的计算器
本文为大家讲解通过分支循环知识及PHP的表单处理一个简单的计算器首先看下效果通过网页显示计算器样式在网页样式中可以看出,有两个输入框Num1.Num2和一个下拉框Type 还有一个提交按钮在输 ...

教你用Vue做一个简单网页计算器

二、案例描述

教你用Vue做一个简单网页计算器相关推荐

最新文章

热门文章