前端应用_Vue_钩子函数的练习之使用binding 取传递的值

最新推荐文章于 2024-07-13 08:30:00 发布

上海_彭彭

最新推荐文章于 2024-07-13 08:30:00 发布

阅读量1.6k

点赞数 3

分类专栏： Vue.js 文章标签： vue binding

本文链接：https://blog.csdn.net/qq_34979346/article/details/99004830

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

前面写 focus 方法，也说了必须用 inserted ，因为你bind 只是创建的过程，但是你没有 insert dom页面，还是没有生成页面效果，下边我们创建自定义的
的样式就不需要插入了，因为他直接可以读取并显示。

总结：自定义行为要用inserted ，自定义样式要用 bind 就行了

我们想创建一个color 样式如下：

        <input type="text" v-model="key_words" class="form-control" v-focus v-color>

自定义指令 color 如下：

  Vue.directive('color',{
            bind:function(el,binding){
                el.style.color=blue            },
        }
        )

效果是可以的，会对输入的内容的颜色改变，但是我想给它传递个值red，看看可以吗，试试效果。

 <input type="text" v-model="key_words" class="form-control" v-focus v-color="'red'">

如果想接受参数，必须要用到 binding 对象，介绍下这个对象保存的什么？
binding
我们只关心三个就行：name，value， expression

比如我们写

 <input type="text" v-model="key_words" class="form-control" v-focus v-color="'red'">

其中 name 对应的是 color ，value 就是 red ， expression就是’red’.

直接取到binding的value 替换成样式的color 就行了，代码如下：

 Vue.directive('color',{
            bind:function(el,binding){
                el.style.color=binding.value
            },
            inserted:function(el){
                el.focus()
            },
            updated:function(el){
            }
        }
        )

是可以实现的，下边就是代码的全部了如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

    </script>
</head>
<body>
<div id="pp" >
    
    <div class="panel panel-primary">
        <div class="panel-heading">
        <h3 class="panel-title">添加宠物</h3>
            </div>
        <div class="panel-body form-inline">
              <label>id:</label>
        <input type="text" v-model="id"  class="form-control">
         <label>name:</label>
        <input type="text" v-model="name" class="form-control">
        <input type="button" value="添加" @click="add" class="btn btn-primary">
        <label>关键字搜索:</label>
        <input type="text" v-model="key_words" class="form-control" v-focus v-color="'red'">

        </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>
            <tr  v-for="item,index in search(key_words)" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td style="color: #0e9aef"><a href="" @click.prevent="del(item.id)">删除</a></td>
            </tr>
        </table>


</div>
<div>

    <script>
        Vue.directive('focus',{
            bind:function(el){
                el.focus()
            },
            inserted:function(el){
                el.focus()
            },
            updated:function(el){
            }
        }
        )
        Vue.directive('color',{
            bind:function(el,binding){
                el.style.color=binding.value
            },
            inserted:function(el){
                el.focus()
            },
            updated:function(el){
            }
        }
        )
          var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    id:'',
                    name:'',
                    key_words: '',

                   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()}]

                },
                methods: {
                    add: function () {
                        this.list.push({id:this.id,ctime:new Date(),name: this.name})
                        this.name=this.id=''
                    },
                    del(id){
                        var index=this.list.findIndex((item)=>{ if(item.id == id){
                            return true;
                     
                        }
                        }
                       
                        )
                        this.list.splice(index,1)
                      
                    },
                    search(key_words){
                        var newlist=[]
                        this.list.forEach(item => {       // 调用了forEach 进行遍历
                            if(  item.name.indexOf(key_words) !=- 1){ // 进行条件判断，看是否包含
                                newlist.push(item)        //由于 forEach 没有返回数组 所以要进行push 到新的数组并返回、
                            }
                            
                        });
                        return newlist

                    }

                }
            }
        )
    </script>
</div>
</body>
</html>