运用vue的方法，计算属性，监听实现计算器

最新推荐文章于 2024-10-12 10:41:56 发布

約束丶

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量92

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67587581/article/details/129869331

版权

文章通过三个示例展示了Vue.js中methods、computed和watch的使用。methods用于定义方法，通过@click事件绑定来响应数据变化。computed属性提供了一个计算属性，当依赖的数据变化时自动计算新值。watch则用于监听数据变化，数据更新时执行相应的处理函数。

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

methods定义方法：

methods属性用来定义方法通过在input上添加@click属性来绑定事件，当数据改变的时候触发方法来改变数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model.number="number1" @change="change" />
			<select v-model="opt" @change="change">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" @change="change" />
			<br />
			结果：<input type="text" v-model="number3" />
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			methods:{
				change(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

computed计算属性：

Vue提供了computed来观察和响应数据变化，当数据需要随着其他数据变化时会重新进行计算返回新的结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<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" />
			<br />
			结果：{{number3}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*"
			},
			computed:{
				number3(){
					if(this.opt == "+"){
						return this.number1+this.number2
					}
					if(this.opt == "-"){
						return this.number1-this.number2
					}
					if(this.opt == "*"){
						return this.number1*this.number2
					}
					if(this.opt == "/"){
						return this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

watch状态监听:

watch状态监听功能可以在数据变化的同时调用当前数据绑定的事件处理方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<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" />
			<br />
			结果：{{number3}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				number3:0
			},
			watch:{
				number1(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				number2(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				opt(){
					
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>