javascript – 如何从内部过滤器输出html

前端之家收集整理的这篇文章主要介绍了javascript – 如何从内部过滤器输出html前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个输入(右上角)用户可以搜索的东西,当它的指令长度获得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?

编辑/解决方

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

我正在接受给予奖励的答案,因为它是正确的.

解决方法

您需要3个步骤才能实现您想要的:

>使用三重括号{{{}}}显示未转义的html
>通过v-model变量过滤您的用户,以便仅显示匹配项
>用< span>替换匹配的子串标签

查看此工作jsfiddle中的已计算过滤的用户和过滤器

原文链接:https://www.f2er.com/js/153578.html

猜你在找的JavaScript相关文章