HTML怎么在li中加select标签,Vue.js做select下拉列表的实例(ul-li标签仿select标签)_莺语

目标：用ul-li标签结合

知识点：

组件的写法及运用

组件之间的数据传递(props的运用)

组件之间的数据传递($emit的运用)

动态数据的绑定(v-bind)

自定义事件通信

效果图：

1、未做任何操作前，下拉列表为隐藏状态

2、点击输入框显示下拉列表

3、点击列表项，输入框值跟随改变

PS: 为了演示data1, data2两组数据的绑定，实例中创建了两个列表

/p>

JavaScript代码

//注册全局组件

//在my-select组件中套用ul-select组件，my-select为父组件ul-select为子组件

ul, li {

margin: 0;

padding: 0;

list-style: none;

}

#selectWrap {

width: 250px;

padding: 2rem;

background: #4682b4;

}

.searchBox input, .searchBox a {

line-height: 1.5rem;

height: 1.5rem;

margin-bottom: 1rem;

padding: 0 5px;

vertical-align: middle;

border: 1px solid #aaa;

border-radius: 5px;

outline: none;

}

.searchBox a {

display: inline-block;

text-decoration: none;

background-color: #b1d85c;

}

.skill li {

font-size: 18px;

line-height: 2rem;

height: 2rem;

padding-left: 5px;

cursor: pointer;

}

.skill li:hover {

background-color: #008b45;

}

以上这篇Vue.开发者。

HTML怎么在li中加select标签,Vue.js做select下拉列表的实例(ul-li标签仿select标签)_莺语_前端开发者...相关推荐

html下拉列表用ul,Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数 ...
ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法发布时间:2021-07-01 12:08:38 来源:亿速云阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
解决2020版IDEA的JAVAScript中找不到vue.js问题
解决2020版IDEA的JAVAScript中找不到vue.js问题 1.安装插件打开IDEA的界面如下步骤:(1)file-->setting-->plugins (2)在搜索框 ...
HTML怎么在li中加select标签,自定义UL LI选择框似乎在其他HTML元素后面
我似乎无法弄清楚为什么我的自定义UL LI选择框出现在其他HTML元素后面.你如何解决这个问题,当用户点击选择框时,它会出现在其他页面元素的顶部? 这里是手头的问题的一个画面: 下面是一个描绘所期望的 ...
html中怎么在li中加图片,如何让li里的图片垂直居中
如何让li里的图片垂直居中? 111111 222222 别用display:table之类的啊,那样一个li占了一个大的单元格那么大的地方,无法和图片li紧贴在一起了. 回复讨论(解决方案) .bo ...
js中php遍历数组,vue.js如何遍历数组
vue.js遍历数组的方法:1.使用foreach循环,代码为[this.urls.forEach(item =>]:2.使用filter循环,代码为[return this.urls.filt ...
vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)
方法一:通过监听器监听方法event参数获取dom对象代码: vue自定义指令 .pop{ width:100px; background-color:#ffff00; height:100px; ...
html th中加斜杠,vue element 表头添加斜线
filters: {}, data() {return{ tableData3: [{ date:'2016-05-03', name:'王小虎', province:'上海', city:'普陀区' ...
js在html中加文字走马灯特效,JS实现文字的走马灯效果
北京欢迎你 // //var x = 20; // //alert(isNaN(x)); //判断其是不是数字 // function scroll() { ...

HTML怎么在li中加select标签,Vue.js做select下拉列表的实例(ul-li标签仿select标签)_莺语_前端开发者...

HTML怎么在li中加select标签,Vue.js做select下拉列表的实例(ul-li标签仿select标签)_莺语_前端开发者...相关推荐

最新文章

热门文章