vue實現(xiàn)簡易的計算器功能
更新時間：2021年11月25日 13:52:58 作者：溫L
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)簡易計算器功能的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)功能：將兩個輸入框中的值進行加減乘除計算
用到的知識點：
1.v-model數(shù)據(jù)雙向綁定
2. .number轉(zhuǎn)化為數(shù)字
3.@click點擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
//選擇自己的vue位置
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 將第一個值轉(zhuǎn)換為數(shù)字 -->
<input type="number" v-model.number="num1"/>
<select v-model="str">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" v-model.number="num2"/>
<!-- 點擊等號執(zhí)行cal函數(shù)里的內(nèi)容 -->
<button type="button" @click="calc">=</button>
<!-- 將結果輸出 -->
<input type="text"/ v-model="num3">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
// 初始輸入框中的數(shù)值
num1:0,
num2:0,
num3:0,
str:'+'
},
methods:{
calc(){
if(this.str=="+"){
this.num3=this.num1+this.num2
}else if(this.str=="-"){
this.num3=this.num1-this.num2
}else if(this.str=="*"){
this.num3=this.num1*this.num2
}else if(this.str=="/"){
this.num3=this.num1/this.num2
}
}
}
})
</script>
</html>
結果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法
getCurrentInstance方法用于獲取當前組件實例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關于Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法,需要的朋友可以參考下2022-08-08
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇Vue2.0點擊切換類名改變樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ElementUI表單驗證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue項目不能使用localhost訪問的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了vue3中的透傳attributes教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue自定義marquee無縫滾動組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要給大家介紹了關于vue中如何創(chuàng)建多個ueditor的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要介紹了如何實現(xiàn)vue的tree組件，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家詳細介紹了基于vue2的table分頁組件實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03