通過 model 綁定給下拉菜單賦值。步驟如下：1. 綁定 model；2. 準備選項數(shù)據(jù)；3. 渲染下拉菜單；4. 監(jiān)聽值變化；5. 初始化值。
UniApp 下拉菜單賦值
如何給 UniApp 下拉菜單賦值？
在 UniApp 中，可以通過 model 綁定來給下拉菜單賦值。
具體步驟如下：
1. 綁定 model
在下拉菜單組件的 data 中，綁定一個數(shù)據(jù)變量作為 model：
<code class="javascript">data() {
return {
selected: '', // 用來保存選中的值
}
}</code>
登錄后復制
2. 選項數(shù)據(jù)準備
將下拉菜單選項數(shù)據(jù)放在一個數(shù)組中，例如：
<code class="javascript">data() {
return {
options: [
{ value: '1', label: '選項 1' },
{ value: '2', label: '選項 2' },
{ value: '3', label: '選項 3' },
]
}
}</code>
登錄后復制
3. 渲染下拉菜單
在模板中，使用下拉菜單組件，并綁定 model 和 options：
<code class="html"><picker v-model="selected" :options="options"></picker></code>
登錄后復制
4. 監(jiān)聽值變化
組件的 change 事件可以監(jiān)聽值變化，從而更新 selected 變量：
<code class="javascript">methods: {
handlePickerChange(value) {
this.selected = value;
}
}</code>
登錄后復制
5. 初始化值
如果需要，可以在組件初始化時設置初始值：
<code class="javascript">created() {
this.selected = '1'; // 設置初始值為選項 1
}</code>
登錄后復制
示例代碼：
<code class="javascript">import { Picker } from '@dcloudio/uni-ui'
export default {
components: {
Picker
},
data() {
return {
selected: '',
options: [
{ value: '1', label: '選項 1' },
{ value: '2', label: '選項 2' },
{ value: '3', label: '選項 3' },
]
}
},
created() {
this.selected = '1';
},
methods: {
handlePickerChange(value) {
this.selected = value;
}
}
}</code>
登錄后復制
