本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。
vue.js实现下拉框的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.php.cn vue下拉框</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="one">
<option v-for="x in shuju">{{x.name}}{{x.famname}}</option>
</select><br>
<div>
<span>{{one}}</span><br>
<span>{{oneF}}</span><br>
<span>{{oneL}}</span>
</div>
</div>
<script>
let rua=new Vue({
el:"#app",
data:{
shuju:[
{name:"孙",famname:"悟空"},
{name:"猪",famname:"八戒"},
{name:"沙",famname:"悟净"}
],
one:""
},
computed:{
oneF(){
return this.one.charAt(0);
},
oneL(){
return this.one.slice(1,3);
}
}
});
</script>
</body>
</html>这里使用在线HTML/CSS/JavaScript代码运行工具测试上述代码，可得如下运行结果：
以上就是vue.js怎么实现下拉框的详细内容，更多请关注易知道|edz.cc其它相关文章！
