时间戳

首页 > 解决方案 > 拆分后替换Vue中的DOM元素

javascript - 拆分后替换Vue中的DOM元素

问题描述

这是我在 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 }}

标签： javascriptvue.jsvuejs2

解决方案

您需要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>

推荐阅读