HarmonyOS JS UI框架select组件change事件的使用_鸿蒙js select 组件

1、查看官方文档如下（[官方文档]）：(https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-select-0000000000611712)
select除了通用事件外还支持change事件，该事件在select选择某项时触发。
2、前端代码如下

<div class="container">
	<!-- select组件设置change事件：@change="selechange" -->
    <select @change="selechange" class="textsele" style="color: {{selecolor}}">
        <option for="{{seleList}}" value="{{ $item.value }}" selected="{{ $item.selesta }}"
                style="color: {{$item.color}};">{{ $item.text }}</option>
    </select>
</div>
1
2
3
4
5
6
7

3、js代码如下

export default {
    data: {
        selecolor: "",
        seleList: [
            {
                "text": "一般",
                "value": "ordinary",
                "color": "green",
                "selesta": "false"
            },
            {
                "text": "紧急",
                "value": "urgent",
                "color": "#FAD603",
                "selesta": "true"
            },
            {
                "text": "很紧急",
                "value": "mast",
                "color": "red",
                "selesta": "false"
            }
        ],
    },
    onInit(){ // 该方法在页面初始化时调用，只调用一次
        for (var i in this.seleList) {
            if(this.seleList[i].selesta == "true"){
                this.selecolor = this.seleList[i].color
            }
        }
    },
    selechange(e){ //change事件回调，select选择时通过newValue参数来获取所选择option对应value值
        switch (e.newValue){
            case 'ordinary':
                this.selecolor = 'green'
                break
            case 'urgent':
                this.selecolor = '#FAD603'
                break
            case 'mast':
                this.selecolor = 'red'
                break
        }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

4、效果如下