介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> www.jb51.net vue下拉框& lt;/title>
& lt;才能script src=癶ttps://cdn.bootcss.com/vue/2.4.4/vue.min.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt;才能select v模型=叭吮?
,,,& lt; option v=皒 拷贝shuju"在{{x.name}} {{x.famname}} & lt;/option>
& lt;才能/select> & lt; br>
& lt;才能div>
,,,& lt; span>{{一}}& lt;/span> & lt; br>
,,,& lt; span> {{oneF}} & lt;/span> & lt; br>
,,,& lt; span> {{oneL}} & lt;/span>
& lt;才能/div>
& lt;/div>
& lt; script>
let 才能Vue ({rua=new
,,,埃尔:“# app"
,,,数据:{
,,,,,shuju:(
,,,,,,,{名称:“孙“famname:“悟空“},
,,,,,,,{名称:“猪“famname:“八戒“},
,,,,,,,{名称:“沙“famname:“悟净“}
,,,,,,
,,,,,一个:““
,,,},
,,,计算:{
,,,,,oneF () {
,,,,,,,return this.one.charAt (0);
,,,,,},
,,,,,oneL () {
,,,,,,,return this.one.slice (1、3);
,,,,,}
,,,}
,,});
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍了vue如何实现下拉框功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
vue实现下拉框功能的具体代码如下:
这里使用<强>在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:
感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现下拉框功能”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
