vue入门 实现简单搜索引擎搜索历史功能

回车添加记录

鼠标悬停 出现删除记录按钮

删除,清空记录

<!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>cnm</title>
    <style>
      
     
      #app{
        display: flex;
        flex-direction: column;
        justify-content:center;
        
      }
    </style>
</head>
<body>
    <div id="app" style="align-items: center;">
      <header >
        <h1 style="text-align: center;">baidu</h1> 
        <input v-model="inputValue" style="width: 198px;height:80px;font-size: large;" autofocus="autofocus" autocomplete="off" placeholder="enter plz" class="" @keyup.enter="add" />
         
      </header>
      
      <div class="main">
      
          <div v-for="(item,index) in list" style="border: 1px solid grey; width: 200px;height:40px;line-height: 40px; ">
          <div @mouseenter="visible(index)" @mouseleave="display(index)">
            {{index+1}}.
                {{item.name}}
          
                
               <button v-show="item.seen" style="float: right;height:40px;background-color: red;"  @click="dlt(index) ">X</button>
              </div>
          </div>
        
        

      </div>
      <footer>
        {{list.length}} items left
        <button  @click="dltAll()">clear</button>

      </footer>
        
      
        
       
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
        el: '#app',
        data: {
          list:[
            {
              name:'123',
              seen:false,
            },
            {
              name:'cnm',
              seen:false,
            },
            {
              name:'???',
              seen:false,
            }
            
          ],
          inputValue:"",
          flag:false
      
        },
        methods:{
            add:function(){
              this.list.push({
               name: this.inputValue,seen:false
                })
            },
            dlt:function(index){
              this.list.splice(index,1)
            },
            dltAll:function(index){
              this.list.splice(index,this.list.length)
            },
            visible:function(index){
              console.log(index)
              this.list[index].seen=true
            },
            display:function(index){
              this.list[index].seen=false 
            }
        }
      })
      </script>
</body>
</html>

 

发布了6 篇原创文章 · 获赞 0 · 访问量 49
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览