vue项目中 一行文本 文字 根据关键字 改变颜色 改变展示颜色2
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<div v-html="disposeRadioList('社会事业局已审批,社区联勤站未审批')"></div>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
// message: '社会事业局已审批,社区联勤站未审批',
}
},
methods: {
disposeRadioList(message) {
let arr = []
let messages = message.split(',')
messages.forEach((e,index) => {
if (e.indexOf('已审批') != -1) {
e = e.replace(e, `<font color='green'>${e}</font>`)
} else if (e.indexOf('未审批') != -1) {
e = e.replace(e, `<font color='red'>${e}</font>`)
}
arr[index] = e
// return e
})
console.log(arr.toString());
return arr.reduce((pre, cur) => pre +","+ cur)
},
},
computed: {
},
}).mount('#app')
</script>
v-html 使用即可