VUE 动态修改颜色值

原创已于 2025-05-06 23:48:57 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #动态修改颜色值

于 2023-04-25 10:53:28 首次发布

该段代码展示了一个Vue.js组件，其中`deFenLv`变量表示班级得分率，并使用`computed`属性根据得分率动态改变颜色。当得分率超过80%时，颜色为绿色(#7ccd7d)，介于60%和80%之间为橙色(#e65a56)，低于60%则显示红色(#e22121)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="num1" v-bind:style="'color:' + num1Color" >
 	市场占有率{{ num1 }}%
</div>

在computed 函数块中添加自定义函数，当内部变量num1变动时，自动变动颜色值

 <script>
 	export default {
 		name: 'ListIteam',
 		props: {
 			soft: String,
 			data2: {},
 		},
 		data() {
 			return {
 				num1: 74,
				color1: "#7ccd7d",

 				// visible: true,
 				// 	content: '测试内容',
 			}
 		},

 		// filters: {

 		//   contentFormat(content)
 		//   {
 		//       if(content.length > 56)
 		//       {
 		//           return content.substring(0, 56) + '...';
 		//       }
 		//       else return content;
 		//   }
 		// },

 		mounted() {},
 		created() {},
	    computed: {
			num1Color()
			{
				if(this.num1 > 80) return "#7ccd7d";
				else if(this.num1 > 60) return "#e65a56"; 
				else return "#e22121"; 
			}
	    },
 		methods: {
			
		}

 	}
 </script>