zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue3中css里的v-bind

Vue3CSS bind
2023-06-13 09:11:18 时间

官方文档:状态驱动的动态 CSS

编写一个组件:

<template>
    <div class="ruben">
        <p>You clicked {{ count }} times</p>
        <button @click="increment">Click me</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 1
        }
    },
    methods: {
        increment() {
            this.count++
        }
    }
}
</script>

<style scoped>
.ruben {
    transform: scale(v-bind(count));
}
</style>

测试: