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.js中使用道具方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
在前后端的开发中总是难免会遇到前后端的跨域问题,下面这篇文章主要给大家介绍了关于vue2中vue.config.js简单配置代理跨域的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
要在Web页面中加入地图，我推荐你使用高德地图,下面这篇文章主要给大家介绍了关于Vue开发高德地图应用的最佳实践,需要的朋友可以参考下2021-07-07
使用两种方式调用本地json文件(基于Vue-cli3脚手架)
这篇文章主要介绍了使用两种方式调用本地json文件(基于Vue-cli3脚手架),具有很好的参考价值,希望对大家有所帮助,2023-10-10
本文主要介绍了Element如何实现loading的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
在vue项目中假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新,这篇文章主要给大家介绍了关于vue3监听路由的变化的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了在vue中实现禁止回退上一步,路由不存历史记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
el-popover是一个基于element-ui框架设计的,用于浮动展示提示或菜单的UI组件,下面这篇文章主要给大家介绍了关于vue.js修改el-popover组件显示位置的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
最近需要做个需求，需要做到element Table表格组件多字段(多列)排序，本文就详细的介绍一下方法，感兴趣的可以了解一下2021-09-09
最新评论