Tabla de contenido
necesidad
Este artículo utiliza dos métodos de js y uniapp para lograr el requisito de cambiar el color de la cadena especificada.
1. Implementación de uniapp
1. parte html
El código es el siguiente (ejemplo):
<view v-html="msg1"></view>
<view v-html="msg2"></view>
<view v-html="msg3"></view>
2. vue parte
El código es el siguiente (ejemplo):
data () {
return {
msg1: `学海无涯<text style="color:#FF0000">一起</text>进步`,
msg2: `学海无涯<text style="color:#7FFFD4">一起</text>进步`,
msg3: `学海无涯<text style="color:#00EE00">一起</text>进步`
}
},
3. Efecto
4. Pequeños programas
El método anterior no es aplicable al subprograma. El subprograma puede usar el método de interceptar la cadena o representar directamente los datos existentes en la plantilla coincidente. Realice las funciones anteriores.
<view style="margin-top: 100rpx;" v-for="(item,index) in msgList" >
学海无涯<text :style="{color: item.color}">{
{item.msg}}</text>进步
</view>
data () {
return {
msgList: [{
msg : '一起',
color: '#FF0000'
},{
msg : '一起',
color: '#7FFFD4'
},{
msg : '一起',
color: '#00EE00'
}],
}
}
Dos, implementación de JavaScript
1. Código
<div class="d1"></div>
<script type="text/javascript" language="javascript">
const reg = /(海)/g
const str = "一入前端身深似海！！！";
const newStrS = str.replace(reg, "<span style='color:#FF0000'>$1</span>");
const d = document.getElementsByClassName('d1')[0]
d.innerHTML = newStrS
</script>
2. Efecto
Resumir
Por favor, corríjame si estoy equivocado