vue中正则高亮显示#话题显示文本效果代码

代码语言:html

所属分类:其他

代码描述:vue中正则高亮显示#话题显示文本效果代码,时候高亮匹配#话题#,还可增加话题链接。

代码标签: vue 正则 高亮 显示 # 话题 显示 文本

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
<style>
    .topic{
        color:blue;
        font-weight: bold;
    }
</style>
</head>

<body>
    <div id="app">
        <div style="margin:20px;">{{message}}</div>
        <div  style="margin:20px;">
             <span v-for="(item, index) in messagearr" :key="index" :class="item[1] === true ? 'topic' : ''">
        {{ item[0] }}
      </span>
        </div>
      
        
                <div  style="margin:20px;">
             <span v-for="(item, index) in messagearr" :key="index" :class="item[1] === true ? 'topic' : ''">
       <block  v-if="!item[1]">
            {{ item[0] }}
           
       </block>
            <block v-if="item[1]">
           <a :href="item[2]"> {{ item[0] }}</a>
           
       </block>
       
      </span>
        </div>
      
        
       
    </div>

    <.........完整代码请登录后点击上方下载按钮下载查看

网友评论0