Javascript 删除鼠标悬停上的Vue自定义筛选器

我想使用VueJS 2删除鼠标上方的截断过滤器。以下是模板中的我的过滤器：

<div class="eng" @mouseover="showAll">{{ word.english | truncate }}</div>

以及：

---

但这就是我丢失的地方…

将

showAll

设置为布尔数据属性，并使用

模板

标记确定通过

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>

{{word.english}
{{word.english | truncate}}

这应该行得通

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) + '...';
        }
    }
}

data（）{
返回{
应该截断：对
}
},
方法：{
showAll（）{
this.shouldTruncate=false
}
},
过滤器：{
截断（值）{
设长度=50；
if（value.length最干净的处理方法是设置一个布尔标志，然后根据标志的潜在存在过滤计算属性。这允许您缓存值，并且您只需要一个带有一个条件观察者的元素，而不是两个

HTML


{{getWord}}

JS

导出默认值{
数据（）{
返回{
showAll：错，
字：{}
}
},
计算：{
getWord:function（）{
如果（this.showAll）返回this.word.english
让value=this.word.english；
设长度=50；
如果（value.length当鼠标悬停时会发生什么事情吗？你能提供showAll的代码吗？
showAll
？这个解决方案对我来说很有效，但是我忽略了它是在一个v-for循环中。有什么方法可以防止所有div都发生这种行为，而只应用于我正在悬停的div吗？@DavidL这肯定没有那么详细e和是一个完全有效的解决方案。但是，我发现，在实践中，能够在组件的模板中看到潜在的DOM更改是非常有帮助的。这肯定是一个灰色区域。但在这种情况下，我认为能够在模板中的这四行中看到
showAll
变量的效果比必须跳转更具可读性查看
showAll
变量是否相关及其影响。@lnamba需要查看您是如何编写该变量的。如果您无法理解，请发布另一个问题。@thanksd这当然是个人偏好的问题。我总是倾向于调试JS，而不是手动检查模板，我会我总是选择一个使用较少观察者的解决方案（如果合理的话），尽管这两种方法都是绝对有效的：）@DavidL是的，完全优先。我可能会在一个月后改变主意：P
showAll(){
  console.log('being mousedover');
  !this.truncate
}

<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) + '...';
        }
    }
}

<div class="eng" @mouseover="showAll = true" @mouseout="showAll = false">
  {{getWord}}
</div>

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) + '...';
            }
        }
    }
}