vue根据不同文字切换显示不同颜色


<template> <div> <h1>temp1</h1> <div> <ul > <dir v-for="item in tss" :key="item"> <li>{{ item.title }}</li> <li :style="activation(item.content)">{{ item.content }}</li> </dir> </ul> </div> </div> </template> <script> export default { data() { return { tss: [ {'title': 'jj','content': 'err'}, {'title': 'jon','content': 'ok'}, {'title': 'jay','content': 'wining'}, {'title': 'james','content': 'mvp'} ] } }, computed: { activation() { return (icontent) => { // 使用JavaScript闭包,进行传值操作 console.log(icontent) if (icontent === "err"){ return {'color':'red'} } else if (icontent === "ok"){ return {'color':'blue'} } else if (icontent === "wining"){ return {'color':'yellow'} } } } } } </script> <style> </style>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM