vue写计数器

一、点击按钮字号变化

核心语句：<p :style="{'font-size':`${a}px`}">计数器</p>
展开来看

<template>
    <div>
        <h1 :style="{'font-size': `${a}px`}">计数器</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 28
            }
        }
    }
</script>

<style>

</style>

注意：先让数据控制住视图。目标，改a。

<template>
    <div>
        <button @click="a--">按我减小</button>
        <button @click="a++">按我增加</button>
        <h1 :style="{'font-size': `${a}px`}">计数器</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 28
            }
        }
    }
</script>

<style>

</style>

计数器
进一步改动，让文字字号有个范围，最大32，最小22，实现方法增加：disabled，

<template>
    <div>
        <button @click="a--" :disabled="a === 22">按我减小</button>
        <button @click="a++" :disabled="a === 32">按我增加</button>
        <h1 :style="{'font-size': `${a}px`}">计数器</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 28
            }
        }
    }
</script>

<style>

</style>

计数器

完成！