拆分后在Vue中替换DOM元素

debugcn 发表于 Dev

德洛拉·侯赛因

这是我在Vue中的数组：

 data: {
        my_list: [
            { "text": "Whoever is Silent. He is Saved", "emphasizes": "Silent, Saved", "link": "website" },
            { "text": "If you don't value yourself, who will", "emphasizes": "value, self", "link": "twitter" },
        ],
    }

这是我的HTML

<li v-for="texts in my_list">
      {{ texts.text}} ({{ texts.emphasizes }}) {{ texts.link }}
</li>

我想重新分配与某些HTML一起拆分时{{ texts.text }}匹配的文本{{ texts.emphasizes }}

尼克尔·劳特（Niklesh Raut）

您需要v-html显示并用于methods替换。

var app = new Vue({
  el:'#app',
   data: {
        my_list: [
            { "text": "Whoever is Silent. He is Saved", "emphasizes": "Silent, Saved", "link": "website" },
            { "text": "If you don't value yourself, who will", "emphasizes": "value, self", "link": "twitter" },
        ],
    },
    methods:{
      replaceText: function(str,replaceText){
        var replaceArr = replaceText.split(',');
        for(let i in replaceArr){
          str = str.split(replaceArr[i].trim()).join('<strong>'+replaceArr[i].trim()+'</strong>');
        }
        return str;
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<ul>
<li v-for="texts in my_list">
      <span v-html="replaceText(texts.text,texts.emphasizes)"></span> ({{ texts.emphasizes }}) {{ texts.link }}
</li>
</ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。