如何从过滤器中输出html

How to output html from filter inside mustache

本文关键字：输出 html 过滤器      更新时间：2023-09-26

我有一个输入(右上角)，用户可以搜索东西，当它的指令长度得到3个字符时，它将显示产品列表并突出显示匹配…

看我的代码:

html

<div id="app">
  <div id="header">
    <div class="right"><input type="text" v-model="message" v-on:keyup="searchStart()" v-on:blur="searchLeave()"/>
      <ul v-if="this.searchInput" class="product-list">
      <li v-for="product in products">
        {{ product.id }} - {{ product.name | highlight }} - {{ product.qtd }}</li></ul>
    </div>
  </div>
  <div id="main">
    <div id="menu">fdfds</div>
    <div id="container">{{ message }}</div>
  </div>
</div>

js 

var search = new Vue({
  el: "#app",
  data: {
    message: "",
    searchInput: false,
    products: [
      {
        id: 1,
        name: "produto 01",
        qtd: 20
      },
      {
        id: 2,
        name: "produto 02",
        qtd: 40
      },
      {
        id: 3,
        name: "produto 03",
        qtd: 30
      },
    ]
  },
  methods: {
    searchStart: function(){
      if(this.message.length >= 3)
        this.searchInput = true;
      console.log(this.searchInput);
    },
    searchLeave: function(){
      this.searchInput = false;
      this.message = "";
      console.log(this.searchInput);
    }
  },
  filters: {
    highlight: function(value){
      return value.replace(search.message, '<span class=''highlight''>' + search.message + '</span>');
    }
  }
});

这里你可以看到一支活笔:http://codepen.io/caiokawasaki/pen/dXaPyj

尝试在笔内键入prod…

我的过滤器正确吗?我创建过滤器的方式是正确的吗?

主要问题是:如何从我的过滤器输出HTML ?

<

编辑/解决方案/h2>

在这种情况下的问题是codepen，与vue有某种冲突，所以我无法使用{{{}}}逃避html，将代码放在另一个编辑器(jsfidle)中，它工作了。

我接受奖励给出的答案，因为它是正确的。

你需要三个步骤来实现你想要的:

  • 使用三括号{{{}}}显示未转义的html
  • 通过v-model变量过滤用户，以便只显示匹配
  • 用<span>标签替换匹配的子字符串

查看计算属性filteredUsers和此工作jsfiddle中的过滤器

相关文章：