本文實例為大家分享了Vue實現簡單計算器的具體代碼，供大家參考，具體內容如下
案例需求
案例思路
1、通過v-model 指令 實現數值A和數值B的綁定
2、給計算按鈕綁定事件，實現計算邏輯
3、將計算結果綁定到對應位置
實現靜態頁面
|
1
2
3
4
5
6
7
|
<div id='app'> <h1>簡單計算器</h1> <div><span>數值A:</span><span><input type="text" v-model='a'></span></div> <div><span>數值B:</span><span type="text" v-model='b'></span></div> <div><button>計算</button></div> <div><span>計算結果</span><span></span></div></div> |
導入Vue
|
1
|
<script type="text/javascript" src="js/vue.js"></script> |
為靜態頁面添加指令
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div id='app'> <h1>簡單計算器</h1> <div><span>數值A:</span> <span> <input type="text" v-model='a'> </span> </div> <div> <span>數值B:</span> <span> <input type="text" v-model='b'> </span> </div> <div> <button v-on:click="handle">計算</button> </div> <div><span>計算結果</span><span v-text="result"></span></div></div> |
設置 計算功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script type="text/javascript"> /* */ var vm = new Vue({ el: "#app", data: { a: '', b: '', result: '' }, methods: { handle: function () { // 實現計算邏輯 this.result = parseInt(this.a) + parseInt(this.b); } } });</script> |
最終代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>簡單計算器</title></head><body> <div id='app'> <h1>簡單計算器</h1> <div><span>數值A:</span> <span> <input type="text" v-model='a'> </span> </div> <div> <span>數值B:</span> <span> <input type="text" v-model='b'> </span> </div> <div> <button v-on:click="handle">計算</button> </div> <div><span>計算結果</span><span v-text="result"></span></div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* */ var vm = new Vue({ el: "#app", data: { a: '', b: '', result: '' }, methods: { handle: function () { // 實現計算邏輯 this.result = parseInt(this.a) + parseInt(this.b); } } }); </script></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_50001396/article/details/112658658
