在vue 3非setup语法糖组件中动态绑定props到style标签
本文介绍如何在不使用setup语法糖的Vue 3组件中,通过v-bind动态绑定从props接收的数据到style标签。 直接在
问题:在
解决方案:在setup函数中返回props对象,然后在
立即学习“前端免费学习笔记(深入)”;
修改后的script部分代码:
export default { props: { width: { type: String, default: '250px' }, height: { type: String, default: '45px' }, color: { type: String, default: '#fff' }, bgcolor: { type: String, default: '#3a8bff' }, btntxt: { type: String } }, name: 'download-btn', setup(props, { emit }) { const click = (event) => { emit('ctaclick', event) }; return { props, click }; } };
修改后的
.download-btn { width: :v-bind(props.width); height: :v-bind(props.height); color: :v-bind(props.color); background-color: :v-bind(props.bgcolor); font-size: 20px; display: flex; justify-content: center; align-items: center; border-radius: 15px; /* .showline(1); // 此行代码含义不明确,建议移除或解释 */ }
注意:在
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END