用四种方法实现计算器

最新推荐文章于 2023-12-17 16:35:32 发布

桺念

最新推荐文章于 2023-12-17 16:35:32 发布

阅读量280

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74186955/article/details/129936771

版权

1.通过<script></script>引入的Vue.js文件。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>

2.创建一个<div>，给一个id，写两个<input>，选择类型为text，用v-model.number绑定且实现为数字类型

使用<select>和<option>来实现加减乘除符号的选择

<div id="app">
			<input type="text" v-model.number="number1" />
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<div>
				<p v-if="opt=='+'">结果：{{number1+number2}}</p>
				<p v-if="opt=='-'">结果：{{number1-number2}}</p>
				<p v-if="opt=='*'">结果：{{number1*number2}}</p>
				<p v-if="opt=='/'">结果：{{number1/number2}}</p>
			<br />
		</div>

3.创建一个 Vue 实例。

<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+"
			}
		})
	</script>

（1）使用表达式

			<div>
				<p v-if="opt=='+'">结果：{{number1+number2}}</p>
				<p v-if="opt=='-'">结果：{{number1-number2}}</p>
				<p v-if="opt=='*'">结果：{{number1*number2}}</p>
				<p v-if="opt=='/'">结果：{{number1/number2}}</p>
			</div>

（2）使用计算属性computed

        computed:{
				a1(){
					switch (this.opt) {
							case '+':
								return Number(this.number1) + Number(this.number2);
								break;
							case '-':
								return Number(this.number1) - Number(this.number2);
								break;
							case '*':
								return Number(this.number1) * Number(this.number2);
								break;
							case '/':
								return Number(this.number1) / Number(this.number2);
								break;
					}
				}
			}

（3）使用watch侦听器

	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				result:null,
				opt:'+'
			},
			methods:{
					a1(){
						switch (this.opt) {
							case '+':
								this.result = Number(this.number1) + Number(this.number2);
								break;
							case '-':
								this.result = Number(this.number1) - Number(this.number2);
								break;
							case '*':
								this.result = Number(this.number1) * Number(this.number2);
								break;
							case '/':
								this.result = Number(this.number1) / Number(this.number2);
								break;
						}
					}
				},
				watch:{
						number1:function(){
							this.a1()
						},
						number2:function(){
							this.a1()
						},
						opt:function(){
							this.a1()
						}
					},
					created(){
						this.a1()
					}
		})
	</script>

（4）使用methods方法

<body>
    <div id="app">
        <input type="text" v-model.number="number1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>    
        <input type="text" v-model.number="number2">
        <br />
        <button @click="button1">计算</button>
        <br />
        <input type="text" v-model.number="number3">
     </div>
</body>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                number1:0,
                number2:0,
               number3:0,
                opt:'+',
            },
            methods:{
                button1(){
                    switch(this.opt){
                        case '+':
                            this.number3=this.number1 + this.number2;
                            break;
                        case '-':
                            this.number3=this.number1 - this.number2;
                            break;
                        case '*':
                             this.number3=this.number1 * this.number2;
                             break;
                        case '/':
                            this.number3=this.number1 / this.number2;
                            break;
                    }
                    
                            
                }
            }
        });
    </script>

桺念

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用四种方法实现计算器

2.创建一个<div>，给一个id，写两个<input>，选择类型为text，用v-model.number绑定且实现为数字类型。1.通过<script></script>引入的Vue.js文件。使用<select>和<option>来实现加减乘除符号的选择。（2）使用计算属性computed。3.创建一个 Vue 实例。（4）使用methods方法。（3）使用watch侦听器。
复制链接

扫一扫