Vue3如何在SCSS中使用v-bind
更新时间：2024年03月02日 14:59:39 作者：huanglihui1007
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
template
先创建一个通用的页面结构
<template> <div class="v-bubble-bg"></div> </template>
js
在JS中先对需要用的数据进行定义：
可以是参数，也可以是data
<script setup>
const props = defineProps({
bgColor: {
type: String,
default: '#000000'
},
bgWidth: {
type: [Number, String],
default: '100%'
},
bgHeight: {
type: [Number, String],
default: '100%'
},
color: {
type: String,
default: 'rgba(255,255,255,.6)'
}
})
const pdata = reactive({
size: '12px'
})
</script>css
<style lang="scss" scoped>
.v-bubble-bg {
background-color: v-bind(bgColor);
width: v-bind(bgWidth);
height: v-bind(bgHeight);
overflow: hidden;
position: absolute;
left: 0;
top: 0;
font-size:v-bind('pdata.size')
}
</style>运行结果
到此这篇关于Vue3 在SCSS中使用v-bind的文章就介绍到这了,更多相关Vue3使用v-bind内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue父子组件通信的高级用法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue中封装组件的相关知识,文中的示例代码讲解详细,对我们深入了解vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了在Vue中使用WebScoket，网络的不稳定而断开连接，webscoket不会出现异常，下面就一起进入文章看看吧2022-01-01
这篇文章主要介绍了<el-button>点击后如何跳转指定url链接问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
今天小编就为大家分享一篇使用vue根据状态添加列表数据和删除列表数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
Vue.js 3.0 为了解决 Object.defineProperty 的这些缺陷，使用 Proxy API 重写了响应式部分，并独立维护和发布整个 reactivity 库，这篇文章主要介绍了vue3 响应式的实现原理,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue在组件中使用v-model的场景，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要介绍了antd多选下拉框一行展示的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文详细介绍了从vue的组件传值着手观察者模式，感兴趣的同学，可以参考下，理解其原理。2021-06-06
最新评论