美文网首页
玩转Vue_品牌实例+过滤器

玩转Vue_品牌实例+过滤器

作者: 伍陆柒_ | 来源:发表于2019-02-12 17:08 被阅读0次
    练习实例：品牌列表
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Id : <input type="text" class="form-control" v-model="id"/>
                    </label>
                    <label>
                        Name : <input type="text" class="form-control" v-model="name"/>
                    </label>
                    <!-- add函数加不加括号都可以，需要传参时必须加括号 -->
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <!-- 阻止默认行为,传参id -->
                            <a href="" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    id : '',
                    name : '',
                    list : [
                        {id:1,name:'奔驰',ctime:new Date()},
                        {id:2,name:'奥迪',ctime:new Date()}
                    ]
                },
                methods: {
                    add(){ // 添加方法
                        //  获取id和name,直接从data中获取
                        //  组织一个对象
                        //  把这个对象添加到data中的list中
                        var brand = {id : this.id,name : this.name,ctime : new Date()};
                        this.list.push(brand);
                        //  清空内容
                        this.id = this.name = '';
                    },
                    del(id){ // 根据id删除数据 
                        // 正常情况下可能是操作数据库执行sql语句
                        // 第一种删除处理方式
//                      this.list.forEach((elem,i)=>{
//                          if(elem.id == id){
//                              this.list.splice(i,1);
//                          }
//                      })
                        // 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
//                      this.list.some((item,i) => {
//                          if(item.id == id){
//                              this.list.splice(i,1);
//                              return true;
//                          }
//                      })
                        // 第三种,使用findIndex,专门用来查找索引
                        var index = this.list.findIndex(item => {
                            if(item.id == id){
                                return true;
                            }
                        })
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>
    关键字过滤
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Id : <input type="text" class="form-control" v-model="id"/>
                    </label>
                    <label>
                        Name : <input type="text" class="form-control" v-model="name"/>
                    </label>
                    <!-- add函数加不加括号都可以，需要传参时必须加括号 -->
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                    <label>
                        搜索名称关键字 : <input type="text" class="form-control" v-model="keywords"/>
                    </label>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
                    <!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
                    <!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
                    <tr v-for="item in serch(keywords)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <!-- 阻止默认行为,传参id -->
                            <a href="" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    id : '',
                    name : '',
                    keywords : '',
                    list : [
                        {id:1,name:'奔驰',ctime:new Date()},
                        {id:2,name:'奥迪',ctime:new Date()}
                    ]
                },
                methods: {
                    add(){ // 添加方法
                        //  获取id和name,直接从data中获取
                        //  组织一个对象
                        //  把这个对象添加到data中的list中
                        var brand = {id : this.id,name : this.name,ctime : new Date()};
                        this.list.push(brand);
                        //  清空内容
                        this.id = this.name = '';
                    },
                    del(id){ // 根据id删除数据 
                        // 正常情况下可能是操作数据库执行sql语句
                        // 第一种删除处理方式
//                      this.list.forEach((elem,i)=>{
//                          if(elem.id == id){
//                              this.list.splice(i,1);
//                          }
//                      })
                        // 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
//                      this.list.some((item,i) => {
//                          if(item.id == id){
//                              this.list.splice(i,1);
//                              return true;
//                          }
//                      })
                        // 第三种,使用findIndex,专门用来查找索引
                        var index = this.list.findIndex(item => {
                            if(item.id == id){
                                return true;
                            }
                        })
                        this.list.splice(index,1)
                    },
                    serch(keywords){ // 根据关键字进行数据的搜索
                        // 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
                        // forEach不能中途终止
                        // some只要返回true,就代表终止
                        // filter返回一个数组
                        // findIndex可以返回索引
                        
//                      var newList = [];
//                      this.list.forEach(item=>{
//                          if(item.name.indexOf(keywords) != -1){
//                              newList.push(item);
//                          }
//                      })
//                      return newList;
                        
                        // filter的方式
                        var newList = this.list.filter(item=>{
                            if(item.name.includes(keywords)){
                                return item;
                            }
                        })
                        return newList;
                    }
                }
            })
        </script>
    </body>
</html>
    过滤器

    Vue中允许自定义过滤器，可被用作一些常见的文本格式化；
    过滤器可用在两个地方：mustache插值{{}}和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符表示

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- msg是要处理的数据，msgFormat的第一个参数是要处理的数据 -->
            <p>{{msg | msgFormat}}</p>
            <!-- 过滤器也可以传参 -->
            <p>{{msg | msgFormat('踢')}}</p>
            <!-- 过滤器的链式操作，msgFormat处理完数据后交给test过滤器再进行处理 -->
            <p>{{msg | msgFormat('踢') | test}}</p>
        </div>
        <script type="text/javascript">
            // 不能写vm后
            // 定义一个全局过滤器,名字叫msgFormat,data是要处理的数据
            // arg0是传过来的参数
            Vue.filter('msgFormat',function(data,arg0){
                // 此处只能替换第一个
                // return data.replace('削','盘');
                // 此处是正则表达式,g代表全局匹配,
                return data.replace(/削/g,'盘'+arg0);
            })
            Vue.filter('test',function(data){
                return data+'==================';
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    msg : '皱皱巴巴，麻麻赖赖，一点儿不圆润，削他，削他，削他'
                },
                methods: {}
            })
        </script>
    </body>
</html>

    过滤器实现时间格式化

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Id : <input type="text" class="form-control" v-model="id"/>
                    </label>
                    <label>
                        Name : <input type="text" class="form-control" v-model="name"/>
                    </label>
                    <!-- add函数加不加括号都可以，需要传参时必须加括号 -->
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                    <label>
                        搜索名称关键字 : <input type="text" class="form-control" v-model="keywords"/>
                    </label>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
                    <!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
                    <!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
                    <tr v-for="item in serch(keywords)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <!-- 利用过滤器格式化时间 -->
                        <td>{{item.ctime | dateFormat}}</td>
                        <td>
                            <!-- 阻止默认行为,传参id -->
                            <a href="" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
            function format(date){
                return date < 10 ? '0'+date : date;
            }
            //  时间格式化过滤器
            Vue.filter('dateFormat',function(dateStr){
                var dt = new Date(dateStr);
                var y = dt.getFullYear();
                var m = dt.getMonth()+1;
                var d = dt.getDate();
                var hh = dt.getHours();
                var mm = dt.getMinutes();
                var ss = dt.getSeconds();
                return `${format(y)}-${format(m)}-${format(d)} ${format(hh)}:${format(mm)}:${format(ss)}`;
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    id : '',
                    name : '',
                    keywords : '',
                    list : [
                        {id:1,name:'奔驰',ctime:new Date()},
                        {id:2,name:'奥迪',ctime:new Date()}
                    ]
                },
                methods: {
                    add(){ // 添加方法
                        //  获取id和name,直接从data中获取
                        //  组织一个对象
                        //  把这个对象添加到data中的list中
                        var brand = {id : this.id,name : this.name,ctime : new Date()};
                        this.list.push(brand);
                        //  清空内容
                        this.id = this.name = '';
                    },
                    del(id){ // 根据id删除数据 
                        // 正常情况下可能是操作数据库执行sql语句
                        // 第一种删除处理方式
//                      this.list.forEach((elem,i)=>{
//                          if(elem.id == id){
//                              this.list.splice(i,1);
//                          }
//                      })
                        // 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
//                      this.list.some((item,i) => {
//                          if(item.id == id){
//                              this.list.splice(i,1);
//                              return true;
//                          }
//                      })
                        // 第三种,使用findIndex,专门用来查找索引
                        var index = this.list.findIndex(item => {
                            if(item.id == id){
                                return true;
                            }
                        })
                        this.list.splice(index,1)
                    },
                    serch(keywords){ // 根据关键字进行数据的搜索
                        // 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
                        // forEach不能中途终止
                        // some只要返回true,就代表终止
                        // filter返回一个数组
                        // findIndex可以返回索引
                        
//                      var newList = [];
//                      this.list.forEach(item=>{
//                          if(item.name.indexOf(keywords) != -1){
//                              newList.push(item);
//                          }
//                      })
//                      return newList;
                        
                        // filter的方式
                        var newList = this.list.filter(item=>{
                            if(item.name.includes(keywords)){
                                return item;
                            }
                        })
                        return newList;
                    }
                }
            })
        </script>
    </body>
</html>

    私有过滤器

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{date | dateFormat}}</p>
        </div>
        <div id="box">
            <p>{{date | dateFormat}}</p>
        </div>
        <script type="text/javascript">
            function format(date){
                return date < 10 ? '0'+date : date;
            }
            // 全局过滤器是每一个vue实例都可用的
            // date（第一个参数）永远是需要处理的数据
            Vue.filter('dateFormat',function(data){
                var dt = new Date(data);
                var y = dt.getFullYear();
                var m = dt.getMonth()+1;
                var d = dt.getDate();
                var hh = dt.getHours();
                var mm = dt.getMinutes();
                var ss = dt.getSeconds();
                return `${format(y)}-${format(m)}-${format(d)} ${format(hh)}:${format(mm)}:${format(ss)}`;
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    date : new Date()
                },
                methods: {}
            })
            var vm2 = new Vue({
                el : '#box',
                data : {
                    date : new Date()
                },
                methods: {},
                // 私有过滤器,就近原则,优先级高于全局过滤器
                filters:{
                    dateFormat : function(data){
                        var dt = new Date(data);
                        var hh = dt.getHours();
                        var mm = dt.getMinutes();
                        var ss = dt.getSeconds();
                        return `${format(hh)}:${format(mm)}:${format(ss)}`;
                    }
                }
            })
        </script>
    </body>
</html>

    OK,这里格式化时间的时候，我们定义了format函数去格式化不足两位的时间数字

      function format(date){
       return date < 10 ? '0'+date : date;
  }

    过于笨重，因此我们可以使用字符串的一个方法padStart()（注意：该方法在低版本浏览器中会报错，坑啊）

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{date | dateFormat}}</p>
        </div>
        <div id="box">
            <p>{{date | dateFormat}}</p>
        </div>
        <script type="text/javascript">
            // 全局过滤器是每一个vue实例都可用的
            // date（第一个参数）永远是需要处理的数据
            // padStart(length,str),length是填充长度，str是要填充的字符串，注意：这是字符串的方法，响应的还有padEnd(length,str)
            Vue.filter('dateFormat',function(data){
                var dt = new Date(data);
                var y = dt.getFullYear();
                var m = (dt.getMonth()+1).toString().padStart(2,"0");
                var d = dt.getDate().toString().padStart(2,"0");
                var hh = dt.getHours().toString().padStart(2,"0");
                var mm = dt.getMinutes().toString().padStart(2,"0");
                var ss = dt.getSeconds().toString().padStart(2,"0");
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    date : new Date()
                },
                methods: {}
            })
            var vm2 = new Vue({
                el : '#box',
                data : {
                    date : new Date()
                },
                methods: {},
                // 私有过滤器,就近原则,优先级高于全局过滤器
                filters:{
                    dateFormat : function(data){
                        var dt = new Date(data);
                        var hh = dt.getHours().toString().padStart(2,'0');
                        var mm = dt.getMinutes().toString().padStart(2,'0');
                        var ss = dt.getSeconds().toString().padStart(2,'0');
                        return `${hh}:${mm}:${ss}`;
                    }
                }
            })
        </script>
    </body>
</html>
    自定义按键修饰符

    还以品牌实例为例，这里我们要点击enter键时也触发add函数

    <!DOCTYPE html>
<html>
    <label>
        <!-- @keyup绑定键盘抬起事件，.enter确定Enter按键 -->
        <!-- 每个按键都有键码，也可以用按键的键码代替 -->
        Name : <input type="text" class="form-control" v-model="name" @keyup.enter="add"/>
        Name : <input type="text" class="form-control" v-model="name" @keyup.13="add"/>
    </label>
</html>

    全部的按键别名

    .enter
    .tab
    .delete (注意：捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right

    键值码固然好用，但好用不好记，所以我们可以自定义全局按键修饰符(了解即可)

    Name : <input type="text" class="form-control" v-model="name" @keyup.f2="add"/>
<script type="text/javascript">
    Vue.config.keyCodes.f2 = 113;
</script>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Id : <input type="text" class="form-control" v-model="id"/>
                    </label>
                    <label>
                        <!-- @keyup绑定键盘抬起事件，.enter确定Enter按键 -->
                        <!-- 每个按键都有键码，也可以用按键的键码代替 -->
                        <!-- Name : <input type="text" class="form-control" v-model="name" @keyup.enter="add"/> -->
                        Name : <input type="text" class="form-control" v-model="name" @keyup.f2="add"/>
                    </label>
                    <!-- add函数加不加括号都可以，需要传参时必须加括号 -->
                    <button type="button" class="btn btn-primary" @click="add">添加</button>
                    <label>
                        搜索名称关键字 :
                        <!-- 注意：Vue中所有指令，在调用的时候都以 v- 开头，包括自定义的指令 -->
                        <input type="text" class="form-control" v-model="keywords" v-focus />
                    </label>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
                    <!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
                    <!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
                    <tr v-for="item in serch(keywords)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <!-- 利用过滤器格式化时间 -->
                        <td>{{item.ctime | dateFormat}}</td>
                        <td>
                            <!-- 阻止默认行为,传参id -->
                            <a href="" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
            function format(date){
                return date < 10 ? '0'+date : date;
            }
            Vue.config.keyCodes.f2 = 113;
            // 使用Vue.directive()定义全局的指令
            // 其中,参数1:指令的名称(注意：这里不需要加v-前缀),但在调用时,必须加
            // 参数2是一个对象,这个对象有一些指令相关的函数,这些函数可以在特点的阶段执行相关的操作
            Vue.directive('focus',{
                bind:function(el){ // 每当指令绑定到元素上时,会立即执行且只执行一次
                // 注意:每个函数第一个参数,永远是el,表示被绑定了指令的元素,el是一个原生的JS对象
                // 但是刚绑定指令时,还没有插入到DOM中去,这时候掉focus方法没有作用
                // 因为,只有元素插入DOM后才能获取焦点,所以不适合用bind,应该用inserted
                    // el.focus();
                },
                inserted:function(el){ // 元素插入到DOM中时执行
                    el.focus();
                },
                updated:function(){ // 当VNode更新时,会执行updated,可能触发多次
                    
                }
            })
            //  时间格式化过滤器
            Vue.filter('dateFormat',function(dateStr){
                var dt = new Date(dateStr);
                var y = dt.getFullYear();
                var m = dt.getMonth()+1;
                var d = dt.getDate();
                var hh = dt.getHours();
                var mm = dt.getMinutes();
                var ss = dt.getSeconds();
                return `${format(y)}-${format(m)}-${format(d)} ${format(hh)}:${format(mm)}:${format(ss)}`;
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    id : '',
                    name : '',
                    keywords : '',
                    list : [
                        {id:1,name:'奔驰',ctime:new Date()},
                        {id:2,name:'奥迪',ctime:new Date()}
                    ]
                },
                methods: {
                    add(){ // 添加方法
                        //  获取id和name,直接从data中获取
                        //  组织一个对象
                        //  把这个对象添加到data中的list中
                        var brand = {id : this.id,name : this.name,ctime : new Date()};
                        this.list.push(brand);
                        //  清空内容
                        this.id = this.name = '';
                    },
                    del(id){ // 根据id删除数据 
                        // 正常情况下可能是操作数据库执行sql语句
                        // 第一种删除处理方式
//                      this.list.forEach((elem,i)=>{
//                          if(elem.id == id){
//                              this.list.splice(i,1);
//                          }
//                      })
                        // 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
//                      this.list.some((item,i) => {
//                          if(item.id == id){
//                              this.list.splice(i,1);
//                              return true;
//                          }
//                      })
                        // 第三种,使用findIndex,专门用来查找索引
                        var index = this.list.findIndex(item => {
                            if(item.id == id){
                                return true;
                            }
                        })
                        this.list.splice(index,1)
                    },
                    serch(keywords){ // 根据关键字进行数据的搜索
                        // 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
                        // forEach不能中途终止
                        // some只要返回true,就代表终止
                        // filter返回一个数组
                        // findIndex可以返回索引
                        
//                      var newList = [];
//                      this.list.forEach(item=>{
//                          if(item.name.indexOf(keywords) != -1){
//                              newList.push(item);
//                          }
//                      })
//                      return newList;
                        
                        // filter的方式
                        var newList = this.list.filter(item=>{
                            if(item.name.includes(keywords)){
                                return item;
                            }
                        })
                        return newList;
                    }
                }
            })
        </script>
    </body>
</html>
    让文本框中的文字直接带颜色
    <!-- 注意：Vue中所有指令，在调用的时候都以 v- 开头，包括自定义的指令 -->
<!-- 注意：这里v-color中的blue是加单引号的，代表这是一个字符串，否则会被认作v-color中东一的变量 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'"/>
~~~
Vue.directive('color',{
    // 样式可直接绑定给元素,不管是否被插入到页面中去
    // 和样式相关的操作,一般可以在bind中执行
    bind:function(el){
        el.style.color = 'red';
    }
})

    有些时候我们希望文字颜色是自定义的

    <!-- 注意：Vue中所有指令，在调用的时候都以 v- 开头，包括自定义的指令 -->
<!-- 注意：这里v-color中的blue是加单引号的，代表这是一个字符串，否则会被认作v-color中东一的变量 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'"/>

    那么自定义指令如何拿到blue这个字符串呢

    Vue.directive('color',{
        // 样式可直接绑定给元素,不管是否被插入到页面中去
        // 和样式相关的操作,一般可以在bind中执行
        // binding中有一些数据行可以拿
        bind:function(el,binding){
            // el.style.color = 'red';
            console.log(binding.name);//拿到的是指令名称color
            console.log(binding.value);// 拿到的是指令参数的运算结果，即1+1，拿到的是2
            console.log(binding.expression);// 拿到的是原值，即带引号的'blue'（1+1，拿到的也是1+1）
            el.style.color = binding.value;
        }
})

    私有自定义指令

    <div id="box">
    <p v-fontweight="'orange'" v-fontsize="'50px'">{{date}}</p>
</div>

            <script type="text/javascript">
            var vm2 = new Vue({
                el : '#box',
                data : {
                    date : new Date()
                },
                methods: {},
                // 私有自定义指令
                directives:{
                    'fontsize':{
                        bind:function(el,binding){
                            el.style.fontSize = binding.value;
                        }
                    },
                    // 简写，如下写法，直接相当于写在了bind和update中
                    'fontweight':function(el,binding){
                        el.style.color = binding.value;
                    }
                }
            })
        </script>

    相关文章

      网友评论

          本文标题：玩转Vue_品牌实例+过滤器

          本文链接：https://www.haomeiwen.com/subject/qeskeqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|玩转Vue_品牌实例+过滤器|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！