js プラグイン: vue.js
チュートリアル：
まずvue.jsをツールに導入します
<head>
<meta charset="utf-8" />
<script src="js/vue.js"></script>
</head>次に、body内にdivを作成し、IDを設定します。ここではIDに「app」という名前を付けました。
「app」というdiv内のinputタグとselectタグを使用して操作ボックスを設定します
次に、メソッド メソッド 計算メソッド ウォッチ (リスナー) メソッドを使用して、3 つの異なる加算、減算、乗算、除算の演算を実行します。
最初の計算メソッド:
<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>
结果是:{
{num1}}{
{sign}}{
{num2}}={
{res}}次に、ID が「app」の div または body の下にスクリプトを作成し、Vue メソッドを定義して、ID が「app」の div をバインドします。
次に、各入力タグと選択タグに対応するデータ属性を設定します。
そして計算されたメソッドを書き込みます:
<script>
const vm = new Vue({
el: "#app"，
data: {
num1:0,
num2:0,
sign:"+",
res：0
}，
computed:{
res(){
if(this.sign === "+") {
return this.num1 + this.num2;
} else if(this.sign === "-") {
return this.num1 - this.num2;
} else if(this.sign === "*") {
return this.num1 * this.num2;
} else if(this.sign === "/"){
return this.num1 / this.num2;
}
}
},
）}
</script>2 番目の監視 (リスナー) メソッド:
次に、body内にdivを作成し、IDを設定します。ここではIDに「app」という名前を付けました。
「app」というdiv内のinputタグとselectタグを使用して操作ボックスを設定します
<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>
结果是:{
{res}} <br><script>
const vm = new Vue({
el: "#app"，
data: {
num1:0,
num2:0,
sign:"+",
res：0
}， watch:{
num1(val){
if(this.sign === "+") {
this.res = val + this.num2;
} else if(this.sign === "-") {
this.res = val - this.num2;
} else if(this.sign1 === "*") {
this.res = val * this.num2;
} else if(this.sign1 === "/"){
this.res = val / this.num2;
}
},
num2(val){
if(this.sign === "+") {
this.res = this.num1 + val;
} else if(this.sign1 === "-") {
this.res = this.num1 - val;
} else if(this.sign1 === "*") {
this.res = this.num1 * val;
} else if(this.sign1 === "/"){
this.res = this.num1 / val;
}
},
sign(val){
if(val === "+") {
this.res = this.num1 + this.num2;
} else if(val === "-") {
this.res = this.num1 - this.num2;
} else if(val === "*") {
this.res = this.num1 * this.num2;
} else if(val === "/"){
this.res = this.num1 / this.num2;
}
}
}
）}
</script>3 番目の方法:
body内にdivを作成してIDを設定します、ここではIDを「app」と名付けました。
「app」というdiv内のinputタグとselectタグを使用して操作ボックスを設定します
<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>
结果是:{
{num5}}{
{sign2}}{
{num6}}={
{res}}<script>
const vm = new Vue({
el: "#app"，
data: {
num1:0,
num2:0,
sign:"+",
res：0
}，methods:{
change(){
if(this.sign2 === "+") {
this.res = this.num1 + this.num2;
} else if(this.sign === "-") {
this.res = this.num1 - this.num2;
} else if(this.sign === "*") {
this.res = this.num1 * this.num2;
} else if(this.sign === "/"){
this.res = parseInt(this.num1) / parseInt(this.num2);
}
}
},
）}
</script>それから走ります
レンダリング
ソースコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/vue.js"></script>
</head>
<body>
<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>
结果是:{
{num1}}{
{sign}}{
{num2}}={
{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>
结果是:{
{num3}}{
{sign1}}{
{num4}}={
{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>
结果是:{
{num5}}{
{sign2}}{
{num6}}={
{res2}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
num1:0,
num2:0,
sign:"+",
res:"0",
num3:0,
num4:0,
sign1:"+",
res1:"0",
num5:0,
num6:0,
sign2:"+",
res2:"0"
},
methods:{
change(){
if(this.sign2 === "+") {
this.res2 = this.num5 + this.num6;
} else if(this.sign2 === "-") {
this.res2 = this.num5 - this.num6;
} else if(this.sign2 === "*") {
this.res2 = this.num5 * this.num6;
} else if(this.sign2 === "/"){
this.res2 = parseInt(this.num5) / parseInt(this.num6);
}
}
},
computed:{
res(){
if(this.sign === "+") {
return this.num1 + this.num2;
} else if(this.sign === "-") {
return this.num1 - this.num2;
} else if(this.sign === "*") {
return this.num1 * this.num2;
} else if(this.sign === "/"){
return this.num1 / this.num2;
}
}
},
watch:{
num3(val){
if(this.sign1 === "+") {
this.res1 = val + this.num4;
} else if(this.sign1 === "-") {
this.res1 = val - this.num4;
} else if(this.sign1 === "*") {
this.res1 = val * this.num4;
} else if(this.sign1 === "/"){
this.res1 = val / this.num4;
}
},
num4(val){
if(this.sign1 === "+") {
this.res1 = this.num3 + val;
} else if(this.sign1 === "-") {
this.res1 = this.num3 - val;
} else if(this.sign1 === "*") {
this.res1 = this.num3 * val;
} else if(this.sign1 === "/"){
this.res1 = this.num3 / val;
}
},
sign1(val){
if(val === "+") {
this.res1 = this.num3 + this.num4;
} else if(val === "-") {
this.res1 = this.num3 - this.num4;
} else if(val === "*") {
this.res1 = this.num3 * this.num4;
} else if(val === "/"){
this.res1 = this.num3 / this.num4;
}
}
}
})
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「hu15137376135」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hu15137376135/article/details/129914536