master

分支 (1)

管理

管理

master

vue-courseware
/
18-练习watch监听.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 需求：计分板   00:00 -->
    <div id="app">
        <button v-on:click="add('A')">A队+1</button>
        <button v-on:click="add('B')">B队+1</button>
        <h4>
            {{numA|dblNum}}:{{numB|dblNum}}
        </h4>
        <h2>{{str}}</h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            numA: 15,
            numB: 13,
            str: ""
        },
        methods: {
            add(str) {
                if (str == 'A') {
                    this.numA++
                } else {
                    this.numB++
                }
            },
            compare() {
                if (this.numA > this.numB) {
                    this.str = "A"
                } else if (this.numA < this.numB) {
                    this.str = "B"
                } else {
                    this.str = "平局"
                }
            }
        },
        filters: { //格式化文本内容
            dblNum(value) {
                // let n = Number(value)
                // n = n >= 10 ? n : '0' + n
                // return n

                //es6 字符串新方法  padStart  padEnd
                //当数字不足两位的时候，在前面补零
                let str = String(value)
                return str.padStart(2, 0) //padStart(n,c),位数不足n位的时候，在前面补c
                    // return str.padEnd(5, 'a')
            }
        },
        watch: {
            // numA() {
            //     this.compare()
            // },
            // numB() {
            //     this.compare()
            // }
            numA: {
                handler() {
                    this.compare()
                },
                immediate: true //立即执行，在页面首次渲染完成后就执行监听
            },
            numB: {
                handler() {
                    this.compare()
                },
                immediate: true //立即执行，在页面首次渲染完成后就执行监听
            },
        },
        computed: {

        }
    })
</script>

</html>