Vue3非setup语法糖中:如何在style标签内使用v-bind动态绑定props?

Vue3非setup语法糖中:如何在style标签内使用v-bind动态绑定props?

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
喜欢就支持一下吧
点赞6 分享