<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>九九乘法表</title> <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>九九乘法表</h3> <input type="text" v-model="num"> <span>请输入数字</span> <button @click="add" :disabled="addFlag">add</button> <button @click="reduce" :disabled="reduceFlag">reduce</button> <table border="1"> <tr v-for="i in parseInt(num)"> <td style="100px;" v-for="j in i"> {{j}}*{{i}}={{j*i}} </td> </div> </table> </div> </body> <script> var app = new Vue({ el:'#app', data:{ num:9, addFlag:false, reduceFlag:false }, methods:{ add:function(){ if(this.num==9){ this.addFlag=true; }else{ this.reduceFlag=false; this.num++; } }, reduce:function(){ if(this.num==1){ this.reduceFlag=true; }else{ this.addFlag=false; this.num--; } } } }) </script> </html>