Question

我在Vue中有一个组件，并且有一些硬编码的数据。我需要将类font-bold uppercase添加到字符串中的一个单词。

我将如何在Vue中实现这一目标？

在下面的代码中，在data > need内，您将看到单词HOPE。我需要这个词来上课。

export default {

    data: function() {
        return {
            locations: [{
                    id: 1,
                    name: 'Example',
                    need: "Lorem ipsum HOPE dolor sit amet.",
                },
                {
                    id: 2,
                    name: 'Example 2',
                    need: "Morbi et lobortis ante, HOPE eu viverra quam.",

                },

              ]
            }
        }
    }

HTML：

<template>
    <div>
        <div v-for="(location, index) in locations">
            <p class="text-base text-navy-500 leading-tight mt-2">
            {{ location.need }}
            </p>
...

我尝试使用与此类似的方法，但无法弄清楚：我假设我需要一种方法来搜索和替换字符串中的单词...

methods: {
            highlight() {
                if(!this.query) {
                    return this.content;
                }
                return this.content.replace(new RegExp(this.query, "HOPE"), match => {
                    return '<span class="highlightText">' + match + '</span>';
                });
            }

任何帮助将不胜感激。

Answer 1

要获得预期的结果，请使用以下创建高亮方法的选项

在循环内创建了高亮方法
检查单词索引-希望
使用v-html使用该变量

methods: { highlight: function(val) { if(val.indexOf('HOPE') !== -1){ return val.replace("HOPE", 'HOPE'); } return ''+val+''
} }

工作代码供参考：

var app = new Vue({
  el: '#app',
  data:  function() {
        return {
            locations: [{
                    id: 1,
                    name: 'Example',
                    need: "Lorem ipsum HOPE dolor sit amet.",
                },
                {
                    id: 2,
                    name: 'Example 2',
                    need: "Morbi et lobortis ante, HOPE eu viverra quam.",

                },

              ]
            }
    },
  methods: {
     highlight: function(val) {
       if(val.indexOf('HOPE') !== -1){
        return val.replace("HOPE", '<span class="highlightText">HOPE</span>');       
       }
       return '<span>'+val+'</span>'

  }
  }
})

.highlightText{
  background: red
}

<div>
  <div id="app">
    <div v-for="(location, index) in locations">
            <p class="text-base text-navy-500 leading-tight mt-2">
           
              <div v-html="highlight(location.need)"></div>
            </p>
  </div>
<div>

codepen-https://codepen.io/nagasai/pen/WNegWXx

如何在Vue数据字符串中添加html类？

1 个答案: