vue下拉选择

Question

<template>
<div class="input">
    <select v-model="fruit" >
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected：{{ fruit }}</span>
</div>
</template>
<script>
export default {
    data () {
        return {
            fruit: 'apple',
            options: [{
                text: '苹果',
                value: 'apple'
            }, {
                text: '香蕉',
                value: 'banana'
            }, {
                text: '西瓜',
                value: 'watermelon'
            }]
        }
    }
}
</script>

为啥效果出不来

Answer 1

找到原因了，vue不支持select属性，要使用picker内建模块

Answer 2

codepen 演示正常

Answer 3

我在自己本地测了一下，是可以的