<!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">
   <!-- 將第一個(gè)值轉(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"/>
   <!-- 點(diǎn)擊等號(hào)執(zhí)行cal函數(shù)里的內(nèi)容 -->
   <button type="button" @click="calc">=</button>
   <!-- 將結(jié)果輸出 -->
   <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>

結(jié)果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問題以及解決辦法
getCurrentInstance方法用于獲取當(dāng)前組件實(shí)例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時(shí)遇到的問題以及解決辦法,需要的朋友可以參考下
2022-08-08
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
Vue2.0點(diǎn)擊切換類名改變樣式的方法
今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類名改變樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
vue項(xiàng)目不能使用localhost訪問的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪問的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue3中的透?jìng)鱝ttributes教程示例詳解
這篇文章主要為大家介紹了vue3中的透?jìng)鱝ttributes教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
詳解vue 自定義marquee無縫滾動(dòng)組件
這篇文章主要介紹了vue自定義marquee無縫滾動(dòng)組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue中如何創(chuàng)建多個(gè)ueditor實(shí)例教程
這篇文章主要給大家介紹了關(guān)于vue中如何創(chuàng)建多個(gè)ueditor的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
如何實(shí)現(xiàn)vue的tree組件
這篇文章主要介紹了如何實(shí)現(xiàn)vue的tree組件，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-12-12
基于vue2的table分頁組件實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了基于vue2的table分頁組件實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03