vue filters和directives访问this的问题详解
更新时间：2022年01月24日 08:38:30 作者：陈景夏
这篇文章主要介绍了vue filters和directives访问this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue filters和directives访问this
记录一次奇葩的需求。
要求自定义一个指令，点击后能跳转指定路由。
directives和filters压根就没法访问this。
脑袋都想破了。
不废话了，上代码。
<template>
<div>
<div v-join="(divData, that)">tag标签</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，再将这个变量当做参数传进directives，在directives内部就可以访问到this了，filters同理。
directives所遇小bug
自己在利用vue写todoList的时候遇到一个小bug,记录一下
写个指令，当双击进行编辑todo,让其自动聚焦，结果效果如下，
代码如下：
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">
是否自定义指令都应放后面呢？这就需要以后验证了
完整代码如下：
<!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)">⨂</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:'',// 输入框中需要增加的内容,
t:''//当前点击的那一个
},
created(){ //当vue创建时执行的方法
//如果storage有 就用这里的值 没有就是空数组
this.todos = JSON.parse(localStorage.getItem('todos')) || [{isSelected:true,title:'晚上回去睡觉'}];
},
watch:{ //watch默认 只监控一层，例如 todos 可以监控数组的变化，监控不到对象的变化
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代表的是我当前点击的是哪一个，存储当前点击的这一项
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(){
//求出数组中为false的个数
//将数组中的true全部干掉，求出剩余length
return this.todos.filter(item=>!item.isSelected).length;
}
},
directives:{ //指令，就是操作dom
focus(el,bindings){
//bindings中有一个value属性 代表的是指令对应的值v-auto-focus="值"
if(bindings.value){
el.focus();
}
//console.log(el,bindings);
}
}
});
let listener = () => {
let hash = window.location.hash.slice(1) || 'complete'; //如果打开页面没有hash默认是全部
vm.hash = hash;
};
listener(); //页面一加载 就需要获取一次hash值，否则可能导致 回到默认hash
window.addEventListener('hashchange',listener,false);
</script>
</body>
</html>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue3实现全局loading指令的示例详解
- vue全局注册自定义指令防抖解析
- vue全局自定义指令和局部自定义指令的使用
- Vue全局自定义指令Modal拖拽的实践
- vue全局自定义指令-元素拖拽的实现代码
- vue directive定义全局和局部指令及指令简写
- 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
- vue3的自定义指令directives实现
- vue 自定义指令directives及其常用钩子函数说明
- vue通过指令(directives)实现点击空白处收起下拉框
- 详解vue + vuex + directives实现权限按钮的思路
- vue全局指令文件 directives详解
相关文章
这篇文章主要介绍了关于vue的列表图片选中打钩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家介绍了Vue指令实现大屏元素分辨率适配详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本文主要介绍了elementui弹窗页按钮重复提交问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
Vue3 ＜script setup lang=“ts“＞ 的基本使用
<script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖，本文主要讲解<script setup> 与 TypeScript 的基本使用，感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了Vue如何监听元素宽高变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue父组件调用子组件函数实现，全文通过举例子及代码的形式进行了一个简单的介绍，希望大家能够理解并且学习到其中知识2021-08-08
这篇文章主要介绍了vue2.0如何动态绑定img的src属性(三元运算)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要给大家介绍了关于Vue路由跳转的5种方式及扩展,在Vue中路由是一种用于导航和管理页面之间跳转的机制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了在vue项目中设置一些全局的公共样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力.2017-03-03
最新评论