uniapp에서 라벨에 색상을 바인딩하는 방법

Uniapp의 색상 바인딩 방법: 먼저 클릭 이벤트를 클릭 레이블에 바인딩한 다음 클릭 이벤트에서 dom을 통해 레이블을 얻은 다음 rgba를 사용하여 레이블 색상을 변경하고 dom 작업을 통해 레이블을 동적으로 바인딩합니다. 색상.

이 튜토리얼의 운영 환경: Windows 10 시스템, uni-app v3 버전, Dell G3 컴퓨터.

추천(무료): uni-app 개발 튜토리얼

uniapp은 클릭 라벨을 구현하고 라벨 내용의 색상이 계속 변경됩니다(vue도 적용됨)

구현 프로세스:

1. label Event

1. 클릭 이벤트에서 DOM을 통해 라벨을 얻습니다

3. rgba를 사용하여 라벨 색상을 변경하고, 세 가지 변수를 설정하고, 임의의 값을 가져옵니다.

4 DOM 작업을 통해 라벨에 동적으로 바인딩합니다.

5. 타이머에 3~4를 넣으세요(클릭 후 자동 색상 변경을 구현하는 것이 목적입니다)

코드는 다음과 같습니다.

html:<text @tap="changeColor" class="testOne" :style="{color:current}">点击连续改变颜色</text>
js:
changeColor() {
if(this.isClick){
return
}
this.isClick = true
let selectorQuery = uni.createSelectorQuery()
let abc = selectorQuery.select(&#39;.testOne&#39;)
let that = this
        setInterval(function() {
                let first = Math.round(Math.random() * 255);
                let second = Math.round(Math.random() * 255);
                let third = Math.round(Math.random() * 255);
                let color = `rgba(${first},${second},${third},1)`//注意这里是模板字符串``
                that.current = color
        }, 500)
    }

위 내용은 uniapp에서 라벨에 색상을 바인딩하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!