IMWeb训练营作业——select

最新推荐文章于 2017-04-24 20:32:05 发布

右石在左

最新推荐文章于 2017-04-24 20:32:05 发布

阅读量216

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_31384627/article/details/70379474

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习了vue的组件，以及v-model，在线查看点击我：select
效果图：

效果图如下：
核心代码：
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div style="float: left;">
      <h2>自定义下拉框</h2>
      <custom-select btn:"查询"></custom-select>
    </div>
  </div>
</body>
</html>

SELECT.JS：

var obj = {
  selectShow:false
}

Vue.componet("custom-select",{
  data:function(){
    return obj
  },
  props:["btn"]
  template:`<section class="warp">
                    <div class="searchIpt clearFix">
                        <div class="clearFix">
                            <input type="text" class="keyWord" value="" @click="selectShow = !selectShow" />
                            <input type="button" :value="btn">
                            <span></span>
    <img src="select_delete.png" class="delete" @click="changeValueHandle('')" />
                        </div>
                        <custom-list 
                            v-show="selectShow" 
                            :list="list"
                            @receive="changeValueHandle"
                        ></custom-list>
                    </div>
                </section>`
})

还有很多没搞明白，正在学习中。

右石在左

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMWeb训练营作业——select

学习了vue的组件，以及v-model，在线查看点击我：select 效果图：核心代码： HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
复制链接

扫一扫