Vue實現(xiàn)簡單網頁計算器
更新時間：2022年04月15日 12:41:04 作者：南蓬幽
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單網頁計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)簡單網頁計算器的具體代碼，供大家參考，具體內容如下
案例描述
1、 考核知識點
2、 創(chuàng)建vue實例和對v-model內置指令的使用
3、 練習目標
創(chuàng)建vue實例。
掌握v-model內置指令的使用。
4、 需求分析
用戶通過選擇計算方法和數(shù)據(jù)輸入，得到計算結果。
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>
? ? ? ? ? ? ? 數(shù)據(jù)1：<input type="text" v-model="num1">
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? 數(shù)據(jù)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',
? ? ? ? ? // 定義初始數(shù)據(jù)
? ? ? ? ? data: {
? ? ? ? ? ? fuhao: '1',
? ? ? ? ? ? num1: '',
? ? ? ? ? ? num2: '',
? ? ? ? ? ? result: ''
? ? ? ? ? },
? ? ? ? ? // 定義事件處理函數(shù)Calc
? ? ? ? ? methods: {
? ? ? ? ? ? calc() {
? ? ? ? ? ? ? if (!this.num1 || !this.num2) {
? ? ? ? ? ? ? ? this.result = '輸入的數(shù)不能為空'
? ? ? ? ? ? ? } 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在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue3使用vueup/vue-quill富文本、并限制輸入字數(shù)的方法處理
這篇文章主要介紹了vue3使用vueup/vue-quill富文本、并限制輸入字數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了用Cordova打包Vue項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了Vue的加載順序探討，詳細的介紹了加載順序以及如何判斷所有的子組件加載完成。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
關于net?6+vue?插件axios?后端接收參數(shù)問題
接到這樣一個項目需求是這樣的，前端vue?必須對象傳遞后端也必須對象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了nuxt靜態(tài)部署打包相對路徑操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關于vue中jsonp插件的使用方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09