欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 绑定