【IMWeb训练营作业】vuejs【组件-下拉列表】实现

来源：互联网发布：网络戴口罩女主播照片编辑：程序博客网时间：2024/06/07 06:29

【IMWeb训练营作业】vuejs【组件-下拉列表】实现

主要包括如下内容：

演示效果
任务内容
核心代码

演示效果

PC端效果
手机端效果
网上演示url

http://vueimweb.oschina.mopaasapp.com/

任务内容

下拉列表
组件之间传值
组件编写

核心代码

所有代码托管在 https://git.oschina.net/marknings/vuelearn1.git

vm代码如下所示

var store = {    save(key,value){        localStorage.setItem(key,JSON.stringify(value));    },    fetch(key){        return JSON.parse(localStorage.getItem(key)) || [];    }}var list = store.fetch("todolist");var filter = {    all:function(list){        return list;    },    finished:function(list){        return list.filter(function(item){            return item.isChecked;        })    },    unfinished:function(list){        return list.filter(function(item){            return !item.isChecked;        })    }};//作业2Vue.component('my-select',{    data:function(){        return {            isShowSelect:false,            val:""        }    },    props:['list']    ,    methods:{        changeShow:function(){            this.isShowSelect=!this.isShowSelect;        },        selectValue:function(value){            this.val=value;            this.isShowSelect=false;        }    },    template:`<div>                <input type="text" placeholder="点击下拉" v-model="val" v-on:click="changeShow()" class="form-control w200" />                <div  v-if="isShowSelect">                    <ul-select v-on:selectVal="selectValue" v-bind:list="list"></ul-select>                </div>            </div>`});Vue.component('ul-select',{    props:['list'],    methods:{        selectChange:function(value){            this.$emit('selectVal',value);        }    },    template:`<ul class="select">                    <li v-for="item in list" v-on:click="selectChange(item)" class="select-item">{{item}}</li>                </ul>`});var cityList=["北京","上海","广州","深圳"];var vm = new Vue({    el:".main",    data:{        list:list,        todo:"",        editortodos:"",        beforeContent:"",        visibility:"all",  //all finished unfinished        cityList:cityList    },    watch:{        /*list:function(){            store.save("todolist",this.list);        }*/        list:{            handler:function(){                store.save("todolist",this.list);            },            deep:true        }    },    methods:{        addTodo(event){            this.list.push({                content:this.todo,                isChecked:false            });            this.todo = "";        },        removeTodo(todo){            var index = this.list.indexOf(todo);            this.list.splice(index,1);        },        editorTodo(todo){            this.beforeContent = todo.content;            this.editortodos = todo;        },        editorTodoend(todo){            this.editortodos = "";        },        cancelTodo(todo){            todo.content = this.beforeContent;            this.editortodos = "";        }    },    directives:{        "foucs":{            update(el,binding){                if (binding.value) {                    el.focus();                }            }        }    },    computed:{        noCheckLength:function(){            return this.list.filter(function(item){                return !item.isChecked            }).length;        },        filterList:function(){            return filter[this.visibility]?filter[this.visibility](list):list;        }    }});function watchHashChange(){    var hash = window.location.hash.slice(1);    vm.visibility = hash;}watchHashChange();window.addEventListener("hashchange",watchHashChange);

html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>宁土文vue任务计划</title>    <link rel="stylesheet" type="text/css" href="index.css" />          <link rel="stylesheet" type="text/css" href="./lib/bootstrap/3.3.0/css/bootstrap.css"/></head><body >   <div class="main container">       <div class="row">        <nav class="navbar navbar-default" role="navigation">        <div class="container-fluid">        <div class="navbar-header">            <button type="button" class="navbar-toggle" data-toggle="collapse"                    data-target="#example-navbar-collapse">                <span class="sr-only">切换导航</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" href="#all">宁土文任务计划列表</a>        </div>        <div class="collapse navbar-collapse" id="example-navbar-collapse">            <ul class="nav navbar-nav">                <li class="active"><a href="#all">所有任务</a></li>                <li ><a href="#unfinished">未完成任务</a></li>                <li><a href="#finished">已完成任务</a></li>            </ul>        </div>        </div>    </nav></div>    <div class="row">            <p><strong>作业2:下拉选择</strong></p>    </div>    <div class="row">         <div class="col-xs-12 col-md-6">            <my-select v-bind:list="cityList"></my-select>        </div>    </div>    <div class="row">            <p><strong>作业1:任务列表</strong></p>        </div>    <div class="row">            <span>添加任务：</span>    </div>    <div class="row">        <input @keyup.enter="addTodo"                           v-model="todo" placeholder="提示：按回车添加" class="form-control"  />    </div>    <br/>    <br />    <div class="row mt50">        <span>任务列表：</span>        <span v-show="list.length"> {{noCheckLength}}个未完成任务</span>     </div>     <div class="row">         <table class="table table-bordered">            <thead>                <tr>                                      <th class="text-center" width="15%">完成</th>                  <th width="70%">任务</th>                  <th class="text-center" width="15%">删除</th>                </tr>              </thead>              <tbody>                <tr :class="{ completed:item.isChecked,editing:item === editortodos}" v-for="item in filterList">                  <td class="text-center">                    <input type="checkbox" name="" v-model="item.isChecked">                  </td>                  <td>                        <label v-if="editortodos !== item" v-on:dblclick="editorTodo(item)">{{ item.content }}</label>                        <input v-if="editortodos === item"                                 type="text"                                 class="form-control"                                name=""                                 v-model="item.content"                                 v-foucs="editortodos === item"                                @blur="editorTodoend(item)"                                @keyup.enter = "editorTodoend(item)"                                @keyup.esc = "cancelTodo(item)"                            />                  </td>                  <td class="text-center">                        <button class="btn btn-primary" @click="removeTodo(item)">删除</button>                  </td>                </tr>                <tr v-if="!list.length">                    <td colspan="3">                        <span v-show="!list.length">还未添加任何任务</span>                    </td>                </tr>              </tbody>         </table>    </div></div>    <script type="text/javascript" src="./lib/jquery/1.11/jquery.js"></script>    <script type="text/javascript" src="./lib/bootstrap/3.3.0/js/bootstrap.js"></script>    <script type="text/javascript" src="./lib/vue/2.2.6/vue.js"></script>    <script type="text/javascript" src="index.js"></script></body></html>

0 0