vue-model實現(xiàn)簡易計算器
更新時間：2020年08月17日 14:28:58 作者：ヽ錯落不堪的年華。
這篇文章主要為大家詳細介紹了vue-model實現(xiàn)簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue-model實現(xiàn)簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下
<!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-Compatible" content="ie=edge">
<title>Vue</title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app" >
<!-- 數(shù)字一 -->
<input type="text" v-model='n1' placeholder="0">
<!-- 加減乘除 -->
<select v-model='opt'>
<option value="+"> + </option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<!-- 數(shù)字2 -->
<input type="text" v-model='n2' placeholder="0">
<!-- 等號 -->
<input type="button" value='=' >
<!-- 結(jié)果 -->
<input type="text" v-model='result' placeholder="0">
<!-- 確定按鈕 -->
<input type="button" value='結(jié)果' @click='calc'>
<!-- 歸零 -->
<input type="button" value='歸零' @click='zero'>
</div>
<script>
var vm = new Vue({
el: '#app', //表示當(dāng)前new的這個實例要控制頁面上的那個區(qū)域
data: { //data屬性存放著 el 中要用到的數(shù)據(jù)
n1: '',
n2:'',
result:'',
opt: '+'
},
methods:{
calc(){
// switch(this.opt){
// case '+':
// this.result = parseInt(this.n1) + parseInt(this.n2)
// break;
// case '-':
// this.result = parseInt(this.n1) - parseInt(this.n2)
// break;
// case '*':
// this.result = parseInt(this.n1) * parseInt(this.n2)
// break;
// case '/':
// this.result = parseInt(this.n1) / parseInt(this.n2)
// break;
// }
// 簡寫
var codeStr = 'parseInt(this.n1) '+ this.opt +' parseInt(this.n2)'
this.result = eval(codeStr)
},
zero(){
this.n1 = '',
this.n2 = '',
this.result = '',
this.opt = '+'
}
}
})
</script>
</body>
</html>
關(guān)于計算器相關(guān)技術(shù)文章請點擊專題： javascript計算器功能匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)div高度可拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue組件掛載到全局方法的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue跨域處理方式(vue項目中baseUrl設(shè)置問題)
這篇文章主要介紹了vue跨域處理方式(vue項目中baseUrl設(shè)置問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
JSONEditor是一個基于Web的工具,用于查看、編輯、格式化和驗證JSON,它有各種模式,這篇文章主要為大家介紹了vue3集成jsoneditor的教程,希望對大家有所幫助2023-09-09
vue路由警告:Duplicate named routes definition問題
這篇文章主要介紹了vue路由警告:Duplicate named routes definition問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Vue.js?3.0中，推出了新的組合式API，使得開發(fā)者能夠更加方便靈活地編寫Vue組件，這也是組合式?API?成為了?Vue?新的開發(fā)范式，與傳統(tǒng)的選項?API?相比，組合式?API?更加靈活、易于維護的原因，在本文中，我們將詳細介紹?Vue?組合式API的風(fēng)格及使用2023-06-06
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來定義組件的自定義事件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了快速修改antd?vue單個組件的默認樣式方式，具有很好的參考價值，希望對大家有所幫助。2022-08-08
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責(zé)是當(dāng)其表達式的值改變時，相應(yīng)的將某些行為應(yīng)用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10