vue写计数器

2019-08-26  本文已影响0人  smartfeng
一、点击按钮字号变化

核心语句:<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>
计数器
完成!
上一篇 下一篇

猜你喜欢

热点阅读