<!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="width: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>
