使用Vue完成加减乘除运算

m0_73956867

已于 2023-04-01 21:34:10 修改

阅读量352

点赞数

文章标签： vue.js 前端

于 2023-04-01 21:33:35 首次发布

本文链接：https://blog.csdn.net/m0_73956867/article/details/129903004

版权

本文通过HBuilder X引入Vue.js，利用input和select元素构建运算框，通过data属性、methods、computed和watch方法实现加减乘除运算。详细介绍了每个步骤，包括源码展示和效果演示。

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

工具： HBuilder X

js插件：vue.js

教程：

首先在工具内引入vue.js

<head>
	<meta charset="utf-8" />
	<script src="js/vue.js"></script>
</head>

然后在body里面创建一个div并设置id，我这里给id命名为"app"

<div id="app">
<div>

在id命名为"app"的div内使用input标签和select标签来设置运算框

<div id="app">
	        <input type="text" placeholder="输入第一个数" v-model.number="num1">
	        <select v-model="sign">
	            <option>+</option>
	            <option>-</option>
	            <option>*</option>
	            <option>/</option>
	        </select>
	        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
	        结果是:{
  {res}} <br>
	        <input type="text" placeholder="输入第一个数" v-model.number="num3">
	        <select v-model="sign1">
	            <option>+</option>
	            <option>-</option>
	            <option>*</option>
	            <option>/</option>
	        </select>
	        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
	        结果是:{
  {res1}} <br>
	        <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
	        <select v-model="sign2"  @change="change">
	            <option>+</option>
	            <option>-</option>
	            <option>*</option>
	            <option>/</option>
	        </select>
	        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
	        结果是:{
  {res2}}
</div>

接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div

<script>
	  const vm = new Vue({
	  el: "#app",
	  data: {
             }
</script>

然后为每个input标签和select标签设置对应的data属性

data: {
	    num1:0,
	    num2:0,
	    sign:"+",
	    num3:0,
	    num4:0,
	    sign1:"+",
	    res1:"",
	    num5:0,
	    num6:0,
	    sign2:"+",
	    res2:"

最低0.47元/天解锁文章

m0_73956867

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Vue完成加减乘除运算

接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div。在id命名为"app"的div内使用input标签和select标签来设置运算框。然后在body里面创建一个div并设置id，我这里给id命名为"app"把写的3种方法分别绑定对应的input标签和select标签最后运行。然后为每个input标签和select标签设置对应的data属性。工具： HBuilder X。首先在工具内引入vue.js。js插件：vue.js。
复制链接

扫一扫