Vue使用方法、计算属性、watch状态监听制作一个简易的计算器。

c-158432

已于 2023-04-01 22:02:08 修改

阅读量195

点赞数

文章标签： vue.js javascript 前端

于 2023-04-01 21:47:56 首次发布

本文链接：https://blog.csdn.net/2201_75322765/article/details/129903270

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js.js"></script>
	</head>
	<body>
		<div id="app">
<!-- v-model 指令将输入框与数据属性绑定在一起 -->
		    <input v-model.number="num1" placeholder="请输入第一个数" />
		    <select v-model="opt">
		      <option>+</option>
		      <option>-</option>
		      <option>*</option>
		      <option>/</option>
		    </select>
		    <input v-model.number="num2" placeholder="请输入第二个数"/>
		    <button @click="changes">计算</button>
<!--双花括号语法来将其显示出来-->
		  结果: {{result}}
		</div>
	</body>
	<script>
// Vue 实例，它有四个数据属性：num1，num2，opt 和 result。
		var vm = new Vue({
			 el: "#app",
			  data: {
			    num1: "",
			    num2: "",
			    opt: "+",
			    result: "",
				},
          //使用方法
          methods: {
				    changes: function () {
				      switch (this.opt) {
				        case "+":
				                this.result = this.num1 + this.num2;
				                    break;
				         case "-":
				                this.result = this.num1 - this.num2;
				                    break;
				         case "*":
				                this.result = this.num1 * this.num2;
				                    break;
				         case "/":
				                this.result = this.num1 / this.num2;
				                    break;

				      }
				    }
				  }
				});
	</script>
</html>

这个代码中，我们创建一个 Vue 实例，它有四个数据属性：num1，num2，opt 和 result。
我们使用 v-model 指令将输入框与数据属性绑定在一起。在点击计算按钮时被调用，该方法使用 switch 语句来确定应该执行哪种操作符。
最终结果存储在 result 数据属性中，我们使用双花括号语法来将其显示在页面上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js.js"></script>
	</head>
	<body>
		<div id="app">
		  <input v-model.number="num1" placeholder="请输入第一个数">
		  <select v-model="opt">
		    <option>+</option>
		    <option>-</option>
		    <option>*</option>
		    <option>/</option>
		  </select>
		  <input v-model.number="num2" placeholder="请输入第二个数"><br />
<!--双花括号语法来将其显示出来-->
		  结果：{{ result }}
		</div>
	</body>
	<script>
//创建了一个 Vue 实例，并定义了三个数据属性：num1，num2 和 opt。
		var vm = new Vue({
			el: "#app",
			  data: {
			    num1:"",
			    num2: "",
			    opt: "+"
			  },
//计算属性
			  computed: {
			    result: function() {
			      switch (this.opt) {
			        case "+":
			          return this.num1 + this.num2;
			        case "-":
			          return this.num1 - this.num2;
			        case "*":
			          return this.num1 * this.num2;
			        case "/":
			          return this.num1 / this.num2;
			          return 0;
			      }
			    }
			  }
		});
	</script>
</html>

我们创建一个 Vue 实例，并定义了三个数据属性：num1，num2 和 opt。我们没有定义 result 数据属性，而是使用了一个计算属性来计算结果。计算属性 result 中使用 switch 语句来确定要执行哪种运算符，然后返回相应的计算结果。最终结果会被自动地更新到页面上，我们使用法来将其显示双花括号语出来。当 num1，num2 或 opt 的值发生变化时，计算属性 result 也会被重新计算并更新到页面上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js.js"></script>
	</head>
	<body>
		<div id="app">
		  <input v-model.number="num1">
		  <select v-model="opt">
		    <option>+</option>
		    <option>-</option>
		    <option>*</option>
		    <option>/</option>
		  </select>
		  <input v-model.number="num2"><br />
<!--双花括号语法将结果显示在页面上-->
		  结果: {{ result }}
		</div>
	</body>
	<script>
//创建一个 Vue 实例，并定义了四个数据属性：num1，num2，opt 和 result。
		var vm = new Vue({
			 el: "#app",
			  data: {
			    num1:"",
			    num2: "",
			    opt: "+",
			    result: ""
			  },
//watch 监听器来监听
			  watch: {
			    num1: function() {
			      this.changes();
			    },
			    num2: function() {
			      this.changes();
			    },
			    opt: function() {
			      this.changes();
			    }
			  },
			  methods: {
			    changes: function() {
			      switch (this.opt) {
			        case "+":
			          this.result = this.num1 + this.num2;
			          break;
			        case "-":
			          this.result = this.num1 - this.num2;
			          break;
			        case "*":
			          this.result = this.num1 * this.num2;
			          break;
			        case "/":
			          this.result = this.num1 / this.num2;
			          break;
			      }
			    }
			  }
		});
	</script>
</html>

我们创建一个 Vue 实例，并定义了四个数据属性：num1，num2，opt 和 result。我们使用了 watch 监听器来监听 num1，num2 和 opt 的变化，并在任何一个变化时调用 changes 方法来计算结果并将其更新到 result 数据属性中。changes 方法中使用 switch 语句来确定要执行哪种运算符，然后将结果存储在 result 数据属性中。最后，我们使用双花括号语法将结果显示在页面上。

最终运行图：

c-158432

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue使用方法、计算属性、watch状态监听制作一个简易的计算器。

我们创建一个 Vue 实例，并定义了四个数据属性：num1，num2，operator 和 result。我们使用了 watch 监听器来监听 num1，num2 和 operator 的变化，并在任何一个变化时调用 changes 方法来计算结果并将其更新到 result 数据属性中。这个代码中，我们创建一个 Vue 实例，它有四个数据属性：num1，num2，opt 和 result。最终结果存储在 result 数据属性中，我们使用双花括号语法来将其显示在页面上。
复制链接

扫一扫