网站规划与设计期末大作业怎么做,摄影网站网络促销方式,微网站建设找哪家公司,宁波最好的seo外包style 绑定的方式
1.html中直接一个属性一个属性的写#xff1b;
2.直接绑定一个对象#xff1b;
3.绑定一个包含多个样式对象的数组。style绑定样式的注意点
推荐使用 驼峰命名 规则来编写样式的名称#xff0c;如 #xff1a; fontSize:12px;
如果使用 中线分割的规则时…style 绑定的方式
1.html中直接一个属性一个属性的写
2.直接绑定一个对象
3.绑定一个包含多个样式对象的数组。style绑定样式的注意点
推荐使用 驼峰命名 规则来编写样式的名称如 fontSize:12px;
如果使用 中线分割的规则时需要将演示名称用单引号引起来如 font-size:12px。style 写法案例
方式一 直接写
template!-- 对于样式属性的明明规则也展示了两种不同的方式注意体会 --div classbasediv:style{fontSize:fontSizeStylepx,background-color:backColorStyle}这是 style 样式绑定的操作br/div/templatescript setup langtsimport { ref } from vue// 定义字体大小的style 样式的值const fontSizeStyle ref(20)// 定义背景颜色的值const backColorStyle ref(red)/scriptstyle scoped/* 基本的样式 */.basediv{width: 200px;height: 200px;border: 1px solid black;margin-left: 100px;margin-top: 100px;}
/style样式效果 方式二 绑定对象 这种方式使 html 的模板更加的简洁 template!-- style 直接绑定一个样式对象 --div classbasediv :stylestyleObj这是 style 样式绑定的操作br/div/templatescript setup langtsimport { ref } from vue// 直接绑定一个对象的方式const styleObj ref({fontSize:16px,background-color:#d4ff00})/scriptstyle scoped/* 基本的样式 */.basediv{width: 200px;height: 200px;border: 1px solid black;margin-left: 100px;margin-top: 100px;}
/style绑定效果 方式三绑定数组 注意 数组的元素同样是 样式对象。 template!-- 通过数组的方式进行属性样式的绑定 --div classbasediv :style[fontSizeObj,backColorObj]这是 style 样式绑定的操作br/div/templatescript setup langtsimport { ref } from vue// 定义字体大小的style 对象const fontSizeObj ref({fontSize:16px})// 定义背景颜色的style 对象const backColorObj ref({background-color:#00ff00})
/scriptstyle scoped/* 基本的样式 */.basediv{width: 200px;height: 200px;border: 1px solid black;margin-left: 100px;margin-top: 100px;}/style运行效果
