在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
