文件名称:
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
开发工具:
文件大小: 68kb
下载次数: 0
上传时间: 2020-11-30
详细说明：目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。
知识点：
组件的写法及运用
组件之间的数据传递（props的运用）
组件之间的数据传递（$emit的运用）
动态数据的绑定（v-bind）
自定义事件通信
效果图：
1、未做任何操作前，下拉列表为隐藏状态
2、点击输入框显示下拉列表
3、 点击列表项，输入框值跟随改变
PS: 为了演示data1, data2两组数据的绑定，实例中创建了两个列表
html代码：
ul-li模仿s</B>
</div>
<div class="title2"><div class="title_more">(系统自动生成,下载前可以参看下载内容)</div><h2>下载文件列表</h2></div>
<div class="font12">
</div>
<div id="show_memo" class="show_info">
<div class="title2"><h2>相关说明</h2></div>
<div class="box_content">
<ul>
<li>本站资源为会员上传分享交流与学习,如有侵犯您的权益,<a href="/about/contact.php" target="_blank">请联系我们删除</a>.</li>
<li>本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行<a href="https://www.baidu.com" target="_blank">百度</a>。</li>
<li class="red">本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用<a href="http://rarlab.com/download.htm" target="_blank">WinRAR最新版</a>进行解压.</li>
<li>如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录<a href="/user/log.php?type=5" target="_blank">反馈给我们</a>.</li>
<li>下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录<a href="/user/log.php?type=5" target="_blank">反馈给我们</a>，经确认后退回积分.</li>
<li>如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.</li>
</ul>
</div>
</div>
<div class="detail_line">
<B>相关搜索</B>:
<a href="/search.php?keyword=vue仿select" target="_blank">vue仿select</a> </div>
<form name="search" action="/search.php" method="get">
<div class="detail_line">
输入关键字，在本站1000多万海量源码库中尽情搜索：<INPUT maxLength="50" size="20" name="keyword" value="">
<input type="submit" value="搜 索" name=_search2>
</div>
</form>
</div><!-- Show end. -->
</div>
<div id="sidebar" class="fr"><!-- Left begin -->
<!--频道分类开始-->
<div class="box">
<div class="title"><h2>下载资源分类</h2></div>
<div class="channel_sort">
<h3><a href="/21/">移动开发</a></h3>
<h3><a href="/16/">开发技术</a></h3>
<h3><a href="/15/">课程资源</a></h3>
<h3><a href="/19/">网络技术</a></h3>
<h3><a href="/12/">操作系统</a></h3>
<h3><a href="/10/">安全技术</a></h3>
<h3><a href="/18/">数据库</a></h3>
<h3><a href="/14/">行业</a></h3>
<h3><a href="/13/">服务器应用</a></h3>
<h3><a href="/11/">存储</a></h3>
<h3><a href="/20/">信息化</a></h3>
<h3><a href="/17/">考试认证</a></h3>
<h3><a href="/22/">云计算</a></h3>
<h3><a href="/23/">大数据</a></h3>
<h3><a href="/24/">跨平台</a></h3>
<h3><a href="/25/">音视频</a></h3>
<h3><a href="/26/">游戏开发</a></h3>
<h3><a href="/27/">人工智能</a></h3>
<h3><a href="/28/">区块链</a></h3>
</div>
</div>
<div class="box">
<div class="title"><h2>资源分类</h2></div>
<div class="channel_sort">
<h3><a href="/1601/">Actionscript</a></h3>
<h3><a href="/1602/">C</a></h3>
<h3><a href="/1603/">C#</a></h3>
<h3><a href="/1604/">C++</a></h3>
<h3><a href="/1605/">Delphi</a></h3>
<h3><a href="/1606/">Java</a></h3>
<h3><a href="/1607/">Javascript</a></h3>
<h3><a href="/1608/">Perl</a></h3>
<h3><a href="/1609/">PHP</a></h3>
<h3><a href="/1610/">Python</a></h3>
<h3><a href="/1611/">VB</a></h3>
<h3><a href="/1612/">Web开发</a></h3>
<h3><a href="/1613/">硬件开发</a></h3>
<h3><a href="/1614/">其它</a></h3>
<h3><a href="//"></a></h3>
</div>
</div>
<div class="box"><!--本站统计开始-->
<div class="title"><h2>本站统计</h2></div>
<UL class="info_ul">
<LI>资源总数：<b>630</b>万个</LI>
<LI>资源大小：<b>15</b>TB</LI>
<LI>今日更新：468个</LI>
<LI>注册人数：225万</LI>
<LI>今日注册：838</LI>
</UL>
</div><!--本站统计结束-->
<div class="box"><!--Intro begin.-->
<div class="title"><h2><a href="/register.php">加入“点数信息”会员</a></h2></div>
<div class="box_content">
“点数信息”是专业的,大型的源码,编程资源等搜索,交换平台,旨在帮助软件开发人员提供源码,编程资源下载,技术交流等服务!目前源码资源大小已超过8TB。<br>
超值价格，购买下载积分，即时到帐，无需等待马上可以下载你所需的资料。无限期使用，一次购买越多越优惠！<br>
</div>
</div><!--Intro end.-->
<div class="box"><!--Intro begin.-->
<div class="title"><h2><a href="/register.php">免费获取积分</a></h2></div>
<div class="box_content">
免费获得积分的途径是通过会员下载您上传的资料，您的帐户即增加积分。<br>
立即上传资料，越多越好，被搜索到的机会越大！越早上传越早得积分，下载次数越多，您的积分越多。<br>
</div>
</div><!--Intro end.-->
<!--合作伙伴开始-->
<div class="box">
<div class="title1"><h2>合作伙伴</h2></div>
<!--推荐商家具体内容开始-->
<div class="channel_friend"><!--最多七个字-->
<ul>
<li><a href="http://www.codeproject.com/" target="_blank">CodeProject</a></li>
<li><a href="http://www.dssz.com/" target="_blank">搜珍网</a></li>
<li><a href="http://www.5177517.com/" target="_blank">建筑工程网</a></li>
<li><a href="http://www.csdn.net/" target="_blank">CSDN.net</a></li>
<li><a href="http://www.5imomo.com/" target="_blank">建筑资料网</a></li>
</ul>
</div>
</div>
</div><!-- Left end -->
</div>
<div id="footer">
<div class="content">
<div class="cr">
客服QQ:6133080 <a href="mailto:info@dssz.net">联系站长</a> · <a href="/about/guestbook.php" rel="nofollow">版权投诉</a> · <a href="/about/guestbook.php" rel="nofollow">网站修改建议</a>
</div>
<div class="cl">
© 1999-2048 <a href="https://www.dssz.net" target="_blank"><font color=red>dssz.net</font></a> <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备11031372号</a>
</div>
</div>
</div>
</body>
</html>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
//-->
</SCRIPT>
