vue自定义指令

最新推荐文章于 2023-10-27 18:01:26 发布

Delicia_Lani

最新推荐文章于 2023-10-27 18:01:26 发布

阅读量224

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/AXIMI/article/details/88112165

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

在Vue中自定义指令：
inserted
bind
指令的简写形式
inserted:
inserted主要涉及和行为相关的指令，来看这个界面：

现在我们想自定义一个指令v-focus，使得每次进入页面时，我们的光标都停在search的输入栏。为了实现这个功能，可以定义全局指令，代码如下：

Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })
Vue.directive是自定义指令的语句
inserted:function(el)中的el不可省略
最终形成的指令为v-focus
将上述代码插入到**<script> 代码块最前端**，得到全部代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height:30px;
            background-color:crimson
        }
    </style>
    <link href="./cssfiles/table_type1.css">
</head>
<body>
    <div id="app">
        <div class="inner">user management</div>
        <label>
            Id:<input type="text" v-model="id">
        </label>
        <label>
            Name:<input type="text" v-model="name" @keyup.enter="add">
        </label>
        <input type="button" value="add" @click="add">
        <label>
            Search:<input type="text" v-model="keywords" v-focus>
        </label>

        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{item.name}}</td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click.prevent="delete(item.id)">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'userA',ctime:new Date()},
                    {id:2,name:'userB',ctime:new Date()},
                    {id:3,name:'userC',ctime:new Date()}
                ],
                msg:'vue test'
            },
            methods:{
                add(){
                    var user={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(user)
                    this.id=''
                    this.name=''
                },
                delete(id){
                    this.list.some((item,i) => {
                        if(item.id==id){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                },
                search(keywords){
                    var newList=[]
                    this.list.forEach(item=>{
                        if(item.name.indexOf(keywords)!=-1){
                            newList.push(item)
                        }
                    })
                    return newList
                }
            }
        })

    </script>

</body>
</html>
显示的效果为：

可以看到进入页面后，search栏的输入框内有光标

bind:
bind主要涉及样式相关的指令，还是上面那个界面，现在我们希望search文本框中字体的颜色为红色，自定义指令如下：

Vue.directive('color',{
            bind:function(el,arg){
                el.style.color=arg.value
            }
        })
这段代码的意思是，我们自定义的指令名为v-color，arg是传入参数的形参，是一个表示颜色的字符串。全部代码如下：

        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{item.name}}</td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click.prevent="delete(item.id)">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.directive('color',{
            bind:function(el,arg){
                el.style.color=arg.value
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'userA',ctime:new Date()},
                    {id:2,name:'userB',ctime:new Date()},
                    {id:3,name:'userC',ctime:new Date()}
                ],
                msg:'vue test'
            },
            methods:{
                add(){
                    var user={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(user)
                    this.id=''
                    this.name=''
                },
                delete(id){
                    this.list.some((item,i) => {
                        if(item.id==id){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                },
                search(keywords){
                    var newList=[]
                    this.list.forEach(item=>{
                        if(item.name.indexOf(keywords)!=-1){
                            newList.push(item)
                        }
                    })
                    return newList
                }
            }
        })

    </script>

</body>
</html>
可以看到search输入框部分的代码为:

<label>
Search:<input type="text" v-model="keywords" v-color="'blue'">
</label>
注意这里"‘blue’“是一个字符串（双引号内单引号），如果写成"blue”（只有双引号）则代码会在data数据块中找变量blue而不是识别blue这个字符串。
显示的效果为：

Delicia_Lani

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令

在Vue中自定义指令：insertedbind指令的简写形式inserted:inserted主要涉及和行为相关的指令，来看这个界面：现在我们想自定义一个指令v-focus，使得每次进入页面时，我们的光标都停在search的输入栏。为了实现这个功能，可以定义全局指令，代码如下：Vue.directive('focus',{ inserted:functi...
复制链接

扫一扫

专栏目录