直接写死
<template><div class="box"></div></template><script >export default{data() {return {}},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}
</style>
动态绑定
<template><div :class=str>动态绑定</div></template><script >export default{data() {return {str:'box', }},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}
</style>
添加两个类名 :
<template><div :class="str" >动态绑定</div></template><script >export default{data() {return {str:'box test', }},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}.test{border: 1px solid green;}
</style>
属性值控制是否有此类名
上面的方法, 如果想要添加类, 需要拼写字符串 , 下面的方法更简单
可以在一个地方集中管理和修改多个类的删除和添加
<template><div :class="{box:true, test:flase}" >样式操作 </div></template><script >export default{data() {return {}},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}.test{border: 1px solid green;}
</style>
对象
<template><div :class="obj">样式操作 </div></template><script >export default{data() {return {obj:{box:true, test:true, }}},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}.test{border: 1px solid green;}
</style>
数组
数组中放入对象
<template><div :class="[{box:true}, {test:true}]">数组中放入对象 </div></template><script >export default{data() {return {}},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}.test{border: 1px solid green;}
</style>
或者是
数组中放入字符串
<template><div :class="arr"> 数组中放入对象 </div></template><script >export default{data() {return {arr:[{box:true, test:true}]}},methods:{}, mounted(){},}
</script><style lang="css">.box{color: red;font-size: 30px;}.test{border: 1px solid green;}
</style>
