鼠标悬停
问题描述:
删除Vue的自定义过滤器,我想利用VueJS 2.鼠标悬停在这里删除截断过滤器是我的模板过滤器:鼠标悬停
<div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div>
这里是过滤器本身:
filters: {
truncate: function(value) {
let length = 50;
if (value.length <= length) {
return value;
} else {
return value.substring(0, length) + '...';
}
}
},
有没有办法在mouseover事件中删除过滤器,以便div不会被截断?谢谢!
编辑:showAll()
功能是我认为我会删除它的地方。我尝试了几种方法去除过滤器,例如:
showAll(){
console.log('being mousedover');
this.truncate = false
},
和:
showAll(){
console.log('being mousedover');
!this.truncate
}
但是这是我迷路了......
答
让showAll
布尔数据属性和使用template
标签来确定要通过v-if
和v-else
指令显示哪个版本的word.english
:
<div class="eng" @mouseover="showAll = true">
<template v-if="showAll">{{ word.english }}</template>
<template v-else>{{ word.english | truncate }}</template>
</div>
答
这应该有效。
data(){
return {
shouldTruncate: true
}
},
methods: {
showAll() {
this.shouldTruncate = false
}
},
filters:{
truncate(value) {
let length = 50;
if (value.length <= length || !this.shouldTruncate) {
return value;
}
else {
return value.substring(0, length) + '...';
}
}
}
答
处理这种问题的最简单方法是设置一个布尔标志,然后根据该标志的潜在存在性过滤计算属性。这允许您缓存该值,并且只需要一个元素而不是两个条件观察器。
HTML
<div class="eng" @mouseover="showAll = true" @mouseout="showAll = false">
{{getWord}}
</div>
JS
export default {
data() {
return {
showAll: false,
word: {}
}
},
computed: {
getWord: function() {
if (this.showAll) return this.word.english
let value = this.word.english;
let length = 50;
if (value.length <= length) {
return value;
} else {
return value.substring(0, length) + '...';
}
}
}
}
当你将鼠标放置做任何事情发生吗?你可以包含'showAll'的代码吗? – Libby