首页 前端知识 vue3中style新特性v-bind

vue3中style新特性v-bind

2024-06-09 09:06:50 前端知识 前端哥 493 409 我要收藏

在vue3.2中增加了一个style v-bind的特性,简单来说就是把我们script中的数据可以在style标签中使用

绑定变量为string 

<template>
  <div class="box">hello world</div>
</template>

<script setup  lang="ts">
import { ref } from 'vue'

const color = ref("red")

</script>
<style>
.box {
  width: 100px;
  height: 100px;
  color: v-bind("color");
}
</style>

绑定变量为object 

 

 

绑定boolean,可配合 三元表达式

 

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11624.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!