1.导入并连接vue.js
<script src="./js/vue.js"></script>
2.
创建一个div标签,给一个id为app,然后再写两个input标签,选择类型为text输入框,以方便输入数字使用select标签和option标签来实现加减乘除符号的选择
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
<cpn3></cpn3>
<cpn4></cpn4>
</div>
<template id="cpn1">
<div class="input1">
<input type="text" v-model.number="number1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model.number="number2">
<button @click="btn">计算</button><br />
{{number1 }} {{opt}} {{number2}}=
<span ref="sp"></span>
</div>
3.使用watch侦听器的方法来实现
watch: {
number1: function (newValue) {
this.value = newValue + this.number2
},
number2: function (newValue) {
this.value = newValue + this.number1
},
opt: function (newValue) {
if (newValue === "+") this.value = this.number1 + this.number2
if (newValue === "-") this.value = this.number1 - this.number2
if (newValue === "*") this.value = this.number1 * this.number2
if (newValue === "/") this.value = this.number1 / this.number2
}
},
})
4.使用methods方法来实现
methods: {
btn() {
let opt = this.opt
if (this.opt === "+") this.$refs.sp.innerText = this.number1 + this.number2
if (this.opt === "-") this.$refs.sp.textContent = this.number1 - this.number2
if (this.opt === "*") this.$refs.sp.textContent = this.number1 * this.number2
if (this.opt === "/") this.$refs.sp.textContent = this.number1 / this.number2
}
},
})
5.运行结果