.jpg)
在vue 3非setup語法糖組件中動(dòng)態(tài)綁定props到style標(biāo)簽
本文介紹如何在不使用setup語法糖的Vue 3組件中，通過v-bind動(dòng)態(tài)綁定從props接收的數(shù)據(jù)到style標(biāo)簽。 直接在
問題：在
解決方案：在setup函數(shù)中返回props對(duì)象，然后在
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
修改后的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); // 此行代碼含義不明確，建議移除或解釋 */ }
注意：在
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END
.png)
