vue3在css中用v-bind动态控制样式

最新推荐文章于 2024-04-29 15:00:49 发布

莉莉今天学习了咩

最新推荐文章于 2024-04-29 15:00:49 发布

阅读量375

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_68557949/article/details/129774291

版权

<template>
    <div>
        <div>
    <input type="text" placeholder="字体变大" style="width: 70px;" @click="changeBig" >
    <input type="text" placeholder="字体变小" style="width: 70px;" @click="small">
</div>
<h1>今天是2023年3月26日,星期日,阴天</h1>
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
const bigSize = ref<string>('50px')
const smallSize = ref<string>('10px')
const size = ref<string>('')
const changeBig = () =>{
    size.value = bigSize.value
}
const small = () =>{
    size.value = smallSize.value
}
</script>
<style scoped>
h1{
    font-size: v-bind(size);
}
</style>