PROSAGA码农传奇-Vue-Vue过滤从vue 1迁移到vue 2

<div class =“post-text”itemprop =“text”>
  <P>
    <a href="https://jsfiddle.net/t5ac1quc/27/" rel="noreferrer">
      更新了小提琴
    </A>
    。
  </p>
   <pre class="lang-html prettyprint-override">
    <code>
      <template id="grid-template">
  <ul>
    <li v-for="suggest in suggestions" v-html="highlight(suggest.message, filterKey)"></li>
  </ul>
</template>

<div id="demo">
  <form>
    Search <input v-model="searchParams.key">
  </form>
  <demo-grid :filter-key="searchParams.key"></demo-grid>
</div>

</code>
  </pre>
   <pre class="lang-js prettyprint-override">
    <code>
      Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    filterKey: String
  },
  data: function () {
    return {
      suggestions: [
        { message: 'Foo' },
        { message: 'Bar' },
        { message: 'Foobar' },
        { message: 'pikachu' },
        { message: 'raichu' }
      ]
    }
  },
  methods: {
    highlight: function(words, query) {
      var iQuery = new RegExp(query, "ig");
      return words.replace(iQuery, function(matchedTxt,a,b){
          return ('<span class=\'highlight\'>' + matchedTxt + '</span>');
      });
    }
  }
})

new Vue({
  el: '#demo',
  data: {
    searchParams: {
      key: '',
    },
  },
});

</code>
  </pre>
  <P>
    摘要：
  </p>
  <UL>
    <LI>
      使用时
       <code>
        <script>
      </code>
       标签来存储模板，设置
       <code>
        type="template"
      </code>
       （或类似的）以防止浏览器将模板作为JavaScript执行。或者更好用
       <code>
        <template>
      </code>
       代替。
    </LI>
    <LI>
       <code>
        {{{ html }}}
      </code>
       语法不再受支持。在Vue 2中你必须使用
       <code>
        v-html
      </code>
       指令代替。
    </LI>
    <LI>
      以来
       <code>
        v-html
      </code>
       是一个指令（并没有使用
       <code>
        {{ }}
      </code>
       插值），它不使用过滤器语法。请改用方法。
    </LI>
    <LI>
      您在数据范围方面存在一些问题。根组件需要为其定义数据
       <code>
        searchParams
      </code>
       在其模板中使用。也
       <code>
        searchParams
      </code>
       是一个数组，但你没有使用它作为一个数组（
       <code>
        searchParams.key
      </code>
      ）;这不适用于Vue 2（必须事先正确声明所有响应数据属性）。
    </LI>
  </UL>
</DIV>