一、点击按钮字号变化
核心语句：<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>
计数器
