11-自定义按键修饰获取焦点

11-自定义按键修饰获取焦点<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title>&a

wahaha-me

209人浏览 · 2019-03-06 15:25:55

wahaha-me · 2019-03-06 15:25:55 发布

11-自定义按键修饰获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/moment.js"></script>
    <style>
        th,td{
            height: 20px;
            /*width: 260px;*/
            font-size: 40px;
            border: 1px solid red;
            text-align: center;
        }
        table{
            border-collapse:collapse;
        }
        input{
            margin-top: 30px;
            margin-bottom: 30px;
            height: 40px;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <lable>Id:
        <input type="text" v-model="id">
    </lable>
    <lable>Name:
        <input type="text" v-model="name" @keyup.enter="add">
        <!--<input type="text" v-model="name" @keyup.113="add">-->
    </lable>

    <input type="button" value="添加" @click="add" :style="{color:'red'}">

    <lable>搜索关键字:
        <!--vue中所以指定调用时候用v-开头-->
        <input type="text" v-model="keyword" id="search" v-color>
    </lable>
    <table>
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Time</th>
            <th>Del</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,i) in search(keyword)" :key="i">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time | dataFormat(pattern)}}</td>
            <td><a href="javascript:;" @click.prevent="jian(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
  Vue.filter('dataFormat',function (dataStr,pattern='YYYY-MM-DD HH:mm:ss') {
    return moment(dataStr).format(pattern)
  })
  Vue.config.keyCodes.f2=113
  //自定义按键修饰符
  //定义全局指定  参数1  指定名称，参数2 是一个对象
  // 注意调用时候需要加v-前缀
  Vue.directive('focus',{
    bind:function (el) {  //当元素绑定会立即执行，只执行一次
      // el.focus()
    },
    inserted:function (el){   //元素插入到dom中时候会执行函数 触发一次
      el.focus()
    },
    updated:function (el) {  //当更新的时候会执行，可以触发多次

    }
  })
  Vue.directive('color',{
    bind:function (el) {
      el.style.color='red'
    }
  })
  var vm = new Vue({
    el:'#app',
    data(){
      return {
        list:[
          {id:1,name:'奔驰',time:new Date()},
          {id:2,name:'宝马',time:new Date()},
          {id:3,name:'奇瑞',time:new Date()},
        ],
        id:"",
        name:"",
        keyword:''
      }
    },
    methods: {
      add(){
        this.list.push({id:this.id,name:this.name,time:new Date()})
        this.id=""
        this.name=""
      },
      jian(id){
        // 根据id找到要删除对象的索引
        // for(var i=0,i<this.list.length,i++)
        // this.list.some((item,i) =>{
        //   if(item.id==id){
        //     this.list.splice(i,1)
        // }
        // })
        // var idd=id-1
        // this.list.splice(idd,1)
        var index=this.list.findIndex((item,i) => {
          if(item.id==id){
          return true;
        }
      })
        this.list.splice(index,1)
      },
      //根据关键字进行搜索
      search(keyword){
        // var newlist=[]
        // this.list.forEach(item=>{
        //   if(item.name.indexOf(keyword) != -1){
        //     newlist.push(item)
        //     }
        // })
        // return newlist
        // 注意  foreach  some   filter  findindex
        return this.list.filter(item =>{
          // includes包含  返回true   否则false
          if(item.name.includes(keyword)){
          return item
        }
      })
      }
    }
  })
  // 第一个参数永远是是过滤器管道符传过来的数据
  // Vue.filter('过滤器名称',function () {
  //
  // })
  //   document.getElementById('search').focus()
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^