Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器

更新時(shí)間：2022年04月15日 12:41:04 作者：南蓬幽

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

案例描述

1、考核知識(shí)點(diǎn)

2、創(chuàng)建vue實(shí)例和對(duì)v-model內(nèi)置指令的使用

3、練習(xí)目標(biāo)

創(chuàng)建vue實(shí)例。
掌握v-model內(nèi)置指令的使用。

4、需求分析

用戶(hù)通過(guò)選擇計(jì)算方法和數(shù)據(jù)輸入，得到計(jì)算結(jié)果。

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>計(jì)算器</title>
? ? <script src="vue.js"></script>
? ? <style>
? ? ? .result{
? ? ? ? font-size: 30px;
? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app">
? ? ? ? <!-- 定義頁(yè)面結(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>

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

您可能感興趣的文章: