当前位置: 首页 > Web前端 > HTML

vue中设置class和style的相关方法

时间:2023-04-02 15:17:34 HTML

class&style样式设置classhtml代码阿斯顿毛

csscode.red{color:red;}.gray{background-color:gray;}js代码窗口。onload=function(){newVue({el:'#box',data:{red:'red',gray:'gray'}});}风格有效的写作:class="[red,gray]"callsvue参数中的data属性:class="{red:true,gray:true}"第二种方法也可以调用vue参数的data属性,记住,Vue中的一切都是datanewVue({el:'#box',data:{red:'red',gray:'gray',a:true,b:false}});:class="json",的简化版本第二种方法,正式版newVue({el:'#box',data:{red:'red',gray:'gray',json:{a:true,b:false}}});style和class基本一样:style="{}":style="a"newVue({el:'#box',data:{red:'red',gray:'gray',a:{color:'red',backgroundColor:'gray'//注意复合样式的书写规则}}});阿斯顿毛:style="[a,b]",a,b对应data中的两个json数据