欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)簡單網(wǎng)頁計算器

 更新時間：2022年04月15日 12:41:04   作者：南蓬幽  
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單網(wǎng)頁計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

案例描述

1、 考核知識點

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

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

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

4、 需求分析

用戶通過選擇計算方法和數(shù)據(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>計算器</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="計算" @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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論