<!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>計(jì)算器</title>
? ? <script src="vue.js"></script>
? ? <style>
? ? ? .result{
? ? ? ? font-size: 30px;
? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app">
? ? ? ? <!-- 定義頁面結(jié)構(gòu) -->
? ? ? ? <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="計(jì)算" @click='calc()'>
? ? ? ? ? ? </li>
? ? ? ? ? </ul>
? ? ? ? ? <div class="result">結(jié)果：{{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>

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

您可能感興趣的文章: