vue项目中div的动态样式绑定

效果图

1、创建元素

<h2 style="text-align:left;">动态样式绑定</h2>
<div>
  <div v-for="item in dataList"
    :key="item.value">
    <ul style="display:flex;jusity-content:flex-start;">
      <li :class="transformStyle(item.value)">
        {{item.label}}
      </li>
    </ul> 
  </div>
</div>

2、方法

export default {
	data() {
    	return {
    		//动态样式绑定
	      dataList:[
	        {
	          label:"镜双城",
	          value:"0",
	        },
	        {
	          label:"真岚",
	          value:"1",
	        },
	        {
	          label:"雪樱",
	          value:"2",
	        }
	      ],
    	}
    },
    methods: {
	    transformStyle(val){
	      // console.log('style -----',val);
	      switch(val){
	        case "0":
	          return 'para1'
	        case "1":
	          return 'para2'
	        default:
	          return 'para3'
	      }
	    },
}

3、样式

<style scoped>
  .para1{
    color: rgb(235, 212, 6);
    font-style: italic;
  }
  .para2{
    color: rgb(5, 175, 96);
    font-size: 20px;
  }
  .para3{
    color: rgb(238, 89, 158);
    font-weight: bold;
  }
</style>

我是土豆，每天进步一点点，下次见！