1.先定义一个字体数据
setup() {
const state = reactive({
size: 1, //默认字体大小值
val: "",//双向绑定的值
//字体数组
posts: [
{ id: 1, name: "28", size: 1 },
{ id: 2, name: "32", size: 2 },
{ id: 3, name: "10", size: 2 },
],
})
2.动态绑定需要改变字体大小的内容 再遍历该数组
<span :style="{ fontSize: size + 'em' }">字体大小</span>
<el-select v-model="val" @change="changtext">
<el-option
v-for="(item, index) in posts"
:key="index"
:label="item.name"
:value="item.id"
/>
</el-select>
3.选中事件
//选择字体事件
changtext(val) {
//如果选中的是10号字体就字体大小相减
if (val == 3) {
state.size = state.size -= 1;
} else {
state.size = state.size += 1;
}
},
效果图: