vue实现光标直接到文本框和定义该文本框的颜色

<input type="text" v-focus v-color="color" placeholder="请输入条件筛选内容" v-model="sname">

//这里的v-focus和v-color='color'是我们定义的

//提供了一个Vue.directive(自定义指令名称，回调函数)
//来供程序员自定义指令的
//注意点：自定义指令的时候不需要加v-
//前缀，但是在是使用的时候必须家加上这个前缀v-
Vue.directive('focus',function () {
    //实现使用当前指令v-focus的文本框自动获取焦点
    //获取到当前使用了v-focus文本框对象
    var inputOjb=this.el;//el表示该文本框，this表示指向这个Vue.darective这个
    //然后这个变量调用了focus方法
    inputOjb.focus();
});
//定义一个v-color的指令
Vue.directive('color',function () {
    //实现当前使用了v-color这个指令的元素的文本颜色是和data中定义好的color的颜色值一致
  this.el.style.color=this.vm[this.expression];
});
//定义全局过滤器
Vue.filter('datefmt',function (input) {
    var res="";
    var year=input.getFullYear();
    var month=input.getMonth()+1;
    var day=input.getDate();
    res=year+'-'+month+'-'+day;
    return res;//返回我们格式化以后的东西

});
var vm=new Vue({
    el:'#app',
    data:{
        color:'red',
         list:[
             {id:1,name:'奔驰',ctime:new Date},
             {id:2,name:'奥迪',ctime:new Date},
             {id:3,name:'丰田',ctime:new Date},
             {id:4,name:'本田',ctime:new Date}
         ],
        id:0,
        pname:"",
        sname:""//自动获取到用户输入的条件筛选条件值
    },