🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言,畅玩云原生,走遍大小厂~💐
🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅,敬请批评指正!🍁🐥
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<picker mode="selector" v-model="pSId" @change="bindPickerChange" :value="index"
:range="pSNames" range-key="pSName">
<view class="flex picker">
<view class='flex-item margin-lg'>我选择:{{pSNames[index].pSName}}
</view>
</view>
</picker>
</view>
</view>
</view>
<script>
export default {
data() {
return {
pSId: '',
pSNames: [{
"pSId": "",
"pSName": ""
}],
index: 0,
pSName: ""
};
},
methods: {
bindPickerChange(e) {
console.log(e)
this.index = e.detail.value
this.pSId = this.pSNames[e.detail.value].pSId
console.log(this.pSId)
},
}
PS:
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
export default {
data() {
return {
array: ['中国', '俄国'],
index: 0,
}
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.target.value)
this.index = e.target.value
},
}
}
重点分析:
range='{{objectArray}}'
指定对象数组range-key="{{'name'}}"
指定 range-key,即指定使用objectArray
中的 name
属性来作为选择器中显示的内容,这里需要注意取出的属性外加了‘’号,即‘name’,引号不可少value='{{objectArray[rangekey].value}}'
,rangekey
是js中定义的对象数组的下标,objectArray[rangekey]
取出的是改下标的对象,如 {id: 1,name: '苹果',price: 18.6}
,而objectArray[rangekey].value
中value
值表示的是range-key
中指定的属性,这里是name
,即苹果。{{objectArray[rangekey].price}} 元
,仍然是通过数组的下标获取,只是这里取出的是对象,.price
取出对象中的价格。到此相信大家都已经明白了picker的range和range-key的用法,简单总结一下picker的range中存放的是objectArray时需要通过range-key去指定选择器中显示的内容,否则通过数组下标取出的是一个object对象。
转全栈第一篇博客,感谢支持~ 如果这篇文章对您有所帮助,或者有所启发的话,求一键三连:点赞、评论、收藏➕关注,您的支持是我坚持写作最大的动力。