计算器案例

京绝古城

已于 2023-04-02 21:54:37 修改

阅读量36

点赞数

文章标签： vue.js javascript ecmascript

于 2023-04-02 21:50:46 首次发布

本文链接：https://blog.csdn.net/m0_70925112/article/details/129917416

版权

该示例展示了如何在Vue.js中创建组件，实现数据双向绑定，以及使用计算属性和方法进行动态计算。用户输入数字和运算符后，实时显示计算结果。同时，对比了使用监听器（watch）和计算属性（computed）以及手动触发方法（methods）的不同方式。

摘要由CSDN通过智能技术生成

1.创建组件

var vm = new Vue({
			el:"#app1",
           }）

2.输出语句

<div id="app1">
			<input type="text" placeholder="请输入第一个数字" v-model.number="number1"/>
				<select v-model="opt">
					<option val="+">+</option>
					<option val="-">-</option>
					<option val="*">*</option>
					<option val="/">/</option>
				</select>
			<input type="text" placeholder="请输入第二个数字" v-model.number="number2"/><br />
			{{number1}} {{opt}} {{number2}} = {{val}}
		</div>
	</body>

3.监听语句

var vm = new Vue({
			el:"#app1",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				val:0
			},
			watch:{
				number1:function(val){
						this.val = val + this.number1;
					},
				number2:function(val){
						this.val = val + this.number2;
					},
				opt:function(val){
					if(val == "+") this.val = this.number1 + this.number2
					if(val == "-") this.val = this.number1 - this.number2
					if(val == "*") this.val = this.number1 * this.number2
					if(val == "/") this.val = this.number1 / this.number2
				}
			}
		})

4.全部代码

<div id="app1">
			<input type="text" placeholder="请输入第一个数字" v-model.number="number1"/>
				<select v-model="opt">
					<option val="+">+</option>
					<option val="-">-</option>
					<option val="*">*</option>
					<option val="/">/</option>
				</select>
			<input type="text" placeholder="请输入第二个数字" v-model.number="number2"/><br />
			{{number1}} {{opt}} {{number2}} = {{val}}
		</div>
		
		<!-- 第二 -->
		<div id="app2">
			<input type="text" placeholder="请输入第一个数字" v-model.number="number1"/>
				<select v-model="opt">
					<option val="+">+</option>
					<option val="-">-</option>
					<option val="*">*</option>
					<option val="/">/</option>
				</select>
			<input type="text" placeholder="请输入第二个数字" v-model.number="number2"/><br />
			{{number1}} {{opt}} {{number2}} = {{getResult}}
		</div>
		
		<!-- 第三 -->
		<div id="app3">
			<input type="text" placeholder="请输入第一个数字" v-model.number="number1"/>
				<select v-model="opt">
					<option val="+">+</option>
					<option val="-">-</option>
					<option val="*">*</option>
					<option val="/">/</option>
				</select>
			<input type="text" placeholder="请输入第二个数字" v-model.number="number2"/>
			<button @click="btn">计算</button><br />
			{{number1}} {{opt}} {{number2}} = {{val}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app1",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				val:0
			},
			watch:{
				number1:function(val){
						this.val = val + this.number1;
					},
				number2:function(val){
						this.val = val + this.number2;
					},
				opt:function(val){
					if(val == "+") this.val = this.number1 + this.number2
					if(val == "-") this.val = this.number1 - this.number2
					if(val == "*") this.val = this.number1 * this.number2
					if(val == "/") this.val = this.number1 / this.number2
				}
			}
		})
		
		
		var vm = new Vue({
			el:"#app2",
			data:{
				number1:0,
				number2:0,
				val:0,
				opt:"+"
			},
			computed: {
				getResult(){
					if(this.opt == "+") this.val = this.number1 + this.number2
					if(this.opt == "-") this.val = this.number1 - this.number2
					if(this.opt == "*") this.val = this.number1 * this.number2
					if(this.opt == "/") this.val = this.number1 / this.number2
					return this.val
					}
				}
			})
		
		var vm = new Vue({
			el:"#app3",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				val:0
			},
			methods:{
				btn(){
					if(this.opt == "+") this.val = this.number1 + this.number2
					if(this.opt == "-") this.val = this.number1 - this.number2
					if(this.opt == "*") this.val = this.number1 * this.number2
					if(this.opt == "/") this.val = this.number1 / this.number2
				}
			}
		})
	</script>

5.结果演示