The tabbar of vue is generated by the for loop, and the content is a string returned directly in the background. How to bind the two?

<div class="news_title">
          <ul>
                 <li v-for="(item,index) in newsLi" :class="{"news_active":index === newsIndex}"  @click="news_title(index)"  :type1="index">{{item}}</li>            
          </ul>
</div>

<div class="news_content" v-html="newslist">

</div>

then the content of the tab is a tagged string

"
    I am the content of tab1.
    I am the content of tab2.
    I am the content of tab3.
."

clipboard.png

:
clipboard.png


first you need to determine whether the tab switching content needs to be changed


manual grouping to get the index

var parser = /<ul[^>]*>([\s\S]*?)</ul>/gi;

or the binding time on the parent calculates the index of the current ul in the parent

Menu