网站推广究竟应该怎么做,安徽网站优化公司价格,成都摄影网站建设,工业物联网平台目录 行内css动态样式对象引入数组引入代码演示总结 欢迎关注 『VUE』 专栏#xff0c;持续更新中 欢迎关注 『VUE』 专栏#xff0c;持续更新中 大体上和前面的class绑定是一致的,只是class换成了style. 请注意,实际开发中,我们一般建议用class,因为style的权重太高了,用sty… 目录 行内css动态样式对象引入数组引入代码演示总结 欢迎关注 『VUE』 专栏持续更新中 欢迎关注 『VUE』 专栏持续更新中 大体上和前面的class绑定是一致的,只是class换成了style. 请注意,实际开发中,我们一般建议用class,因为style的权重太高了,用style你会因为找不到是什么原因导致样式变化而抓狂(styleclass覆盖了class的样式)
行内css
p :style{ color: red, fontSize: 20px }直接写死样式/p动态样式
特别注意fontsize要带单位才会有效果 p :style{ color: myColor, fontSize: myFontSize }动态样式/pp :style{ color: myColor, fontSize: myFontSizeNum px }动态样式,字体大小无单位/pmyColor: green,myFontSize: 30px,myFontSizeNum: 50,对象引入
p :stylestyleObject采用对象的方式引入/pstyleObject: {color: red,fontSize: 60px,},数组引入
其实和对象引入差不多,就是加了一个中括号,优点是可以同时引入多个对象,注意先后顺序会覆盖样式,这里就fontsize是80px p :style[styleObject, styleObject2]采用数组的方式引入/pstyleObject: {color: red,fontSize: 60px,},styleObject2: {fontSize: 80px,},代码演示
templateh3style样式/h3p :style{ color: red, fontSize: 20px }直接写死样式/pp :style{ color: myColor, fontSize: myFontSize }动态样式/pp :style{ color: myColor, fontSize: myFontSizeNum px }动态样式,字体大小无单位/pp :stylestyleObject采用对象的方式引入/pp :style[styleObject, styleObject2]采用数组的方式引入/p
/templatescript
export default {data() {return {myColor: green,myFontSize: 30px,myFontSizeNum: 50,styleObject: {color: red,fontSize: 60px,},styleObject2: {fontSize: 80px,},};},
};
/script 总结
大家喜欢的话给个点个关注给大家分享更多计算机专业学生的求学之路
版权声明
发现你走远了mzh原创作品转载必须标注原文链接
Copyright 2024 mzh
Crated2024-3-1 欢迎关注 『VUE』 专栏持续更新中 欢迎关注 『VUE』 专栏持续更新中 『未完待续』
