Vue之趣味乘法表 

<!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>

 

posted @ 2019-11-21 19:36  凌137  阅读(645)  评论(0)    收藏  举报