vue绑定class和style
程序员文章站
2022-07-04 20:55:01
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style属性</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#wrap',
data:{
bb:'aa',
dd:'cc',
flag:true,
xx:{color:'blue',fontSize:'30px'}, //复合样式，采用驼峰式命名法
yy:{backgroundColor:'yellow'}
},
methods:{
}
});
};
</script>
<style>
.aa{
color:red;
font-size: 20px;
}
.cc{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<!--
class属性
-->
<!-- <p class="aa">欢迎光临</p> --> <!-- 可以，普通css方式 -->
<!-- <p :class="aa">欢迎光临</p> --> <!-- 不可以，不能直接访问css样式 -->
<!-- 用法1：变量形式 -->
<!-- <p :class="bb">欢迎光临</p> -->
<!-- 用法2：数组形式，可以同时引用多个 -->
<!-- <p :class="[bb,dd]">欢迎光临</p> -->
<!-- 用法3：json形式，可以直接访问css样式，flag中vue中的数据，true表示应用该样式，false表示不应用 -->
<!-- <p :class="{aa:true,cc:flag}">欢迎光临</p> -->
<!--
style属性
-->
<p :style="[xx,yy]">欢迎光临</p>
</div>
</body>
</html>
class属性绑定：
1.绑定变量
<div :class="{classA:a , classB: b,......}"/></div>
new Vue({
el:'#app',
data:{
a:true,//根据true/false判断是否执行class
b:true
}
})
2.绑定对象
<div :class="test"></div>
new Vue({
el:'#app',
data:{
test:{
color:red;
background:yellow;
}
}
})
3.绑定一个数组
<div :class="[test1,test2]"></div>
new Vue({
el:'#app',
data:{
test1Class:test1,
test2Class:test2
}
})
4.绑定三元表达式
:class="[A>B?'signSpanChange':'signSpan']"
new Vue({
el:'#app',
data:{
A:"",
B:""
}
})
style样式绑定:
1.绑定变量
:style="{color:cl,background:bk}"
new Vue({
el:'#app',
data:{
cl:'red',
bk:'yellow'
}
})
2.绑定一个对象
:style="testObj"
new Vue({
el:'#app',
data:{
testObj:{
color:red;
background:yellow;
}
}
})
3.绑定函数返回值
:style="{background:!flag?deep:BackType(sign.status)}"
methods: {
BackType: function(status) {
if (status == "已完成") return "#d7f2e6";
if (status == "工作中") return "#23b7e5";
if (status == "缺料" || status == "等待" || status == "配料完成")
return "#ced0d1";
if (status == "下班" || status == "转产") return "#f8ac59";
if (status == "质检") return "#ed5565";
}
}
参考：https://blog.csdn.net/weixin_39581226/article/details/80682867
更多参考：Class 与 Style 绑定
下一篇： N年前的两个脚本%5c暴库