Question

我想使用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) + '...';
      }
    }
 },

有没有办法删除鼠标悬停事件上的过滤器，以便div不再被截断？谢谢！

编辑：showAll()函数是我认为我会删除它的地方。我尝试了几种方法来删除过滤器，例如：

showAll(){
  console.log('being mousedover');
  this.truncate = false
},

和

showAll(){
  console.log('being mousedover');
  !this.truncate
}

但这就是我失去的地方......

Answer 1

使showAll成为布尔数据属性，并使用template标记来确定通过word.english和v-if指令显示的v-else版本：

<div class="eng" @mouseover="showAll = true">
  <template v-if="showAll">{{ word.english }}</template>
  <template v-else>{{ word.english | truncate }}</template>
</div>

Here's a working fiddle.

Answer 2

处理此问题最干净的方法是设置布尔标志，然后根据标志的潜在存在过滤计算属性。这允许您缓存该值，并且您只需要一个元素和一个条件观察器而不是两个。

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

Answer 3

这应该有用。

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

在鼠标悬停时删除Vue自定义筛选器

3 个答案: