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>

posted @ 2021-06-16 09:36  世界险恶你要内心强大  阅读(993)  评论(0编辑  收藏  举报