vue作业

原创已于 2023-04-02 21:19:49 修改 · 1.3k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2023-04-02 20:59:56 首次发布

本文介绍了如何使用Vue.js构建三种简单的计算器：通过函数方法、监听器以及计算属性。在HTML部分，利用Vue的v-model进行双向绑定，计算属性用于动态计算结果。在Vue部分，详细阐述了函数方法的实现，包括switch-case语句的运用，以及如何通过侦听器监听数值变化并自动更新结果。最后提到了计算属性的实现方式。

利用vue做出三种简单的计算机。1利用函数2使用监器3使用计算属性。

1.html
1.1创建一个名为app的盒子装三种方法的html部分

1.2用value将运算符号赋值给选项，再在select中用v-model赋值给opt，在computed计算属性中将两个数字进行运算，再用v-model双向绑定将结果赋给输入框展现出来。双向绑定的好处是当用户更改输入元素中的值时，计算属性会自动重新计算结果。使用Number属性是将其转换为数字类型以便计算

二.vue部分

在vue部分需要挂载装三种方法html部分的盒子app，定义2个数字，1个字符。

2.1函数方法实现。

2.1.1在函数中使用switch和case语句来判断选择的运算符，为不同的运算符设置相应的运算语句.

2.2

侦听器

定义了三个侦听器函数，分别侦听n1,n2,opt，当这三个属性任何一个发生变化时，侦听器会调用watch1方法再次计算结果并重新传给显示结果的Input中

2.3.计算属性方法实现

3.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>methods</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="n1">
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2">
			<button @click="fangfa">计算</button>
			<br/>
			<input type="text" v-model="result">
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					n1: 0,
					n2: 0,
					opt: '+',
					result: 0
				},
				methods: {
					fangfa() {
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>watch</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input id="input" type="text" v-model="n1" /> 
			 <select v-model="opt">
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="text" v-model="n2" />
			<input type="text" v-model="result" />
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					n1:0,
					n2:0,
					result:null,
					opt:'+'
				},
				methods:{
					watch1(){
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				},
				watch:{
					n1:function(){
						this.watch1()
					},
					n2:function(){
						this.watch1()
					},
					opt:function(){
						this.watch1()
					}
				},
				created(){
					this.watch1()
				}
			})
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>computed</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input id="input" type="text" v-model="n1"/>
			 <select v-model="opt">
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="text" v-model="n2"/>
			<input type="text" v-model="result"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					n1:0,
					n2:0,
					opt:'+'
				},
				computed:{
					result(){
						switch (this.opt) {
							case '+':
								return Number(this.n1) + Number(this.n2);
								break;
							case '-':
								return Number(this.n1) - Number(this.n2);
								break;
							case '*':
								return Number(this.n1) * Number(this.n2);
								break;
							case '/':
								return Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}
			})
		</script>
	</body>
</html>