vue中css写法_vuecss写法⼤全.isActive {
position: relative;
css中的position属性
color: #348EED;
background: #BFBFBF;
border: #000c17;
width: 30px;
height: 50px;
}
.left {
left: 50px;
margin-left: 50px;
}
1.普通写法
直接把变量给css值 变量的值是字符串正常的css
//js
return isActive: 'isActive left'
对象写法
isActive是否显⽰ 取决于isAct2 是true还是fales true 就正常显⽰ false 隐藏 和if判断⼀样
//js
isActive: 'isActive left',
isAct2: true,
left2: false,
3.数组写法
本质上和普通写法⼀样
//js
isAct3: ['isActive', 'left'],
4.三元写法
三元 if + else
//js
isActive: 'isActive left',
isAct4: true,
5.转回原始写法
在⼤括号中的值不再是变量⽽是原始的css值
6.style
等同于正常的css，但是可以在⾥⾯加逻辑 如判断左
//js
computed: {
// 计算属性
style2() {
return {
color: this.isAct2 ? 'red' : 'blue',
fontSize: '80px'
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。