©2020-2024 ioDraw All rights reserved
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script
src="./vue.js"></script> <style> </style> </head> <body> <!-- algorithm算法 -->
<div id="algorithm"> //把值传给苹果 苹果：<stepper @nchange="apple=$event"></stepper>
<br> //把值传给橙子 设置初始值为3 橙子：<stepper @nchange="orange=$event"
:count="3"></stepper><br> //把两种水果的值相加显示出来 两者之和：<span
v-text.number="apple+orange" @nchange="orange=$event" @nchange="apple=$event"
></span> </div> </body> <script type="text/javascript">
//点击做减法运算,$emit子传父事件，当num<1时按键不能使用 // 显示num值，输入框改变时调用check事件
//点击做加法运算,$emit子传父事件，当num>999时按键不能使用 const stepper = { template: ` <span>
<button @click="num--;$emit('nchange',num)" :disabled="num<1">-</button> <input
type="text" v-model.number="num" @change="check();$emit('nchange',num)">
<button @click="num++;$emit('nchange',num)" :disabled="num>999">+</button>
</span> `, data() { return { num: this.count, } }, //设置初始值 props: { count: {
type: Number, default: 1 } }, methods:{ check(){ if(isNaN(this.num)){
this.num=0; } if(this.num>=1000){ this.num=1000; } if(this.num<=0){ this.num=0;
} } } } var vm = new Vue({ el: "#algorithm", components: { stepper }, data: {
apple: 1, orange: 3 } }) </script> </html>