欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?filters和directives訪問this的問題詳解

 更新時間:2022年01月24日 08:38:30   作者:陳景夏  
這篇文章主要介紹了vue?filters和directives訪問this的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue filters和directives訪問this

記錄一次奇葩的需求。

要求自定義一個指令,點擊后能跳轉(zhuǎn)指定路由。

directives和filters壓根就沒法訪問this。

腦袋都想破了。

不廢話了,上代碼。

<template>
    <div>
        <div v-join="(divData, that)">tag標(biāo)簽</div>
        <p>{{divData}}</p>
        <p>{{divData | sum(that)}}</p>
    </div>
</template>
<script>
export default {
    name: 'Main',
    data(){
        return {
            divData:'傳入的值',
            that: this,
            filtersData: '過濾器的值'
        }
    },
    filters: {
        sum(val, that){
            return `${val}和${that.filtersData}`
        }
    },
    directives: {
        join: {
            inserted(el, binding){
                
            },
            bind(el, binding){
                console.log('------2')
                el.addEventListener('click', function(){
                    binding.value.that.$router.push({
                        path: '/aside'
                    })
                    
                })
            }
        }
    }
}
</script>

解決方案是在data中定義一個that變量指向this,再將這個變量當(dāng)做參數(shù)傳進(jìn)directives,在directives內(nèi)部就可以訪問到this了,filters同理。

directives所遇小bug

自己在利用vue寫todoList的時候遇到一個小bug,記錄一下

寫個指令,當(dāng)雙擊進(jìn)行編輯todo,讓其自動聚焦,結(jié)果效果如下,

代碼如下:

directives: {
    focus(el,bindings) {
        if(bindings.value) {
              el.focus();
         }
     }
}
<input v-focus="todo == t" type="text" v-show="todo == t"  v-model="todo.title" @blur="reset" @keyup.13="reset" >

多方查找原因,把自定義v-focus指令放末尾,就好了,代碼如下:

<input type="text" v-show="todo == t"  v-model="todo.title" @blur="reset" @keyup.13="reset" v-focus="todo == t">

是否自定義指令都應(yīng)放后面呢?這就需要以后驗證了

完整代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
        .del{
            text-decoration: line-through;
            color: #ccc!important;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            <input type="text" v-model="value" class="form-control" @keydown.enter="add">
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item" @dblclick="change(todo)" v-for="(todo,index) in todos" :key="index">
                                    <div v-show="todo != t" :class="{del: todo.isSelected}">
                                        <input type="checkbox" v-model="todo.isSelected">{{todo.title}}
                                        <button class="pull-right btn btn-danger btn-xs" @click="remove(index)">&bigotimes;</button>
                                    </div>
                                    <input type="text" v-show="todo == t"  v-model="todo.title" @blur="reset" @keyup.13="reset" v-focus="todo == t">
                                    <!-- 下面是錯誤代碼,可以把上面的注釋掉打開下面的對比下 -->
                                    <!-- <input v-focus="todo == t" type="text" v-show="todo == t"  v-model="todo.title" @blur="reset" @keyup.13="reset" > -->
                                </li>
                            </ul>
                        </div>
                        <div class="panel-footer">
                            <ul class="nav nav-pills">
                                <li role="presentation" class="active"><a href="#">全部</a></li>
                                <li role="presentation"><a href="#">已完成</a></li>
                                <li role="presentation"><a href="#">未完成</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                todos:[],
                hash:'complete',//路徑切換時 獲取的hash值
                value:'',// 輸入框中需要增加的內(nèi)容,
                t:''//當(dāng)前點擊的那一個
            },
            created(){ //當(dāng)vue創(chuàng)建時執(zhí)行的方法
                //如果storage有 就用這里的值 沒有就是空數(shù)組
                this.todos = JSON.parse(localStorage.getItem('todos')) || [{isSelected:true,title:'晚上回去睡覺'}];
            },
            watch:{  //watch默認(rèn) 只監(jiān)控一層,例如 todos 可以監(jiān)控數(shù)組的變化,監(jiān)控不到對象的變化
                todos:{
                    handler(){
                        localStorage.setItem('todos',JSON.stringify(this.todos));
                    },
                    deep:true
                }
            },
            methods:{
                addTodo(){
                    let todo = {isSelected:false,title:this.value};
                    this.todos.push(todo);
                    this.value = '';
                },
                remove(todo){
                    this.todos = this.todos.filter(item=>todo!==item);
                },
                change(todo){
                    //todo代表的是我當(dāng)前點擊的是哪一個,存儲當(dāng)前點擊的這一項
                    this.t = todo;
                },
                reset(){
                    this.t = '';
                }
            },
            computed:{
                lists(){
                    if(this.hash === 'complete'){
                        return this.todos;
                    }
                    if(this.hash === 'finish'){
                        return this.todos.filter(item=>item.isSelected)
                    }
                    if(this.hash === 'unfinish'){
                        return this.todos.filter(item=>!item.isSelected)
                    }
                },
                total(){
                    //求出數(shù)組中為false的個數(shù)
                    //將數(shù)組中的true全部干掉,求出剩余l(xiāng)ength
                    return this.todos.filter(item=>!item.isSelected).length;
                }
            },
            directives:{ //指令,就是操作dom
                focus(el,bindings){
                    //bindings中有一個value屬性 代表的是指令對應(yīng)的值v-auto-focus="值"
                    if(bindings.value){
                        el.focus();
                    }
                    //console.log(el,bindings);
                }
            }
        });
        let listener = () => {
            let hash = window.location.hash.slice(1) || 'complete'; //如果打開頁面沒有hash默認(rèn)是全部
            vm.hash = hash;
        };
        listener(); //頁面一加載 就需要獲取一次hash值,否則可能導(dǎo)致 回到默認(rèn)hash
        window.addEventListener('hashchange',listener,false);
    </script>
</body>
</html>

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • el-table表格點擊該行任意位置時也勾選上其前面的復(fù)選框

    el-table表格點擊該行任意位置時也勾選上其前面的復(fù)選框

    本文主要介紹了在el-table組件中實現(xiàn)雙擊表格某一行任意位置自動勾選復(fù)選框的功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2025-02-02
  • Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐

    Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐

    本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • Vue動態(tài)組件component的深度使用說明

    Vue動態(tài)組件component的深度使用說明

    這篇文章主要介紹了Vue動態(tài)組件component的深度使用說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue簡易版無限加載組件實現(xiàn)原理與示例代碼

    Vue簡易版無限加載組件實現(xiàn)原理與示例代碼

    這篇文章主要給大家介紹了關(guān)于Vue簡易版無限加載組件實現(xiàn)原理與示例代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2022-07-07
  • vue踩坑記之npm?install報錯問題解決總結(jié)

    vue踩坑記之npm?install報錯問題解決總結(jié)

    當(dāng)你跑起一個項目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報錯問題解決的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • Vue3對比Vue2的優(yōu)點總結(jié)

    Vue3對比Vue2的優(yōu)點總結(jié)

    vue3解決了vue2的一些缺陷與弊端,學(xué)習(xí)新的技術(shù)是很有必要的,本文總結(jié)了一些vue3的優(yōu)點,希望各位能盡快轉(zhuǎn)入vue3的使用中
    2021-06-06
  • Vue filter 過濾當(dāng)前時間 實現(xiàn)實時更新效果

    Vue filter 過濾當(dāng)前時間 實現(xiàn)實時更新效果

    這篇文章主要介紹了Vue filter 過濾當(dāng)前時間 實現(xiàn)實時更新效果,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)

    Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)

    vue項目中點擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)
    2022-12-12
  • 詳解 vue.js用法和特性

    詳解 vue.js用法和特性

    Vue.js目前已經(jīng)更新到2.x,功能和語法上有一定升級和修改,本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧
    2017-10-10
  • Vue+Element使用富文本編輯器的示例代碼

    Vue+Element使用富文本編輯器的示例代碼

    本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08

最新評論