工具: 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:"