使用vue做标题高亮,使用v-html="ruleTitle(item)"无法获取到数据

<div
                  class="task-list-item-container"
                  v-for="(item, index) in taskList.slice((pagination.currentPage-1)*pagination.size, pagination.currentPage*pagination.size)"
                  @click="openDetailPage(item)"
                  @mouseenter="enterTaskItem(index)"
                  @mouseleave="leaveTaskItem(index)"
          >
            <div class='task-cover-container'>
              <img :src="taskCoverUrl"/>
            </div>
            <div class="task-list-item-detail-container">
              <div>
                <div class="task-list-item-detail-title-container">
                  <div class="task-list-item-detail-title-text" v-html="ruleTitle(item)">
                  </div>
                  <div class='task-list-item-detail-title-icons'>
                    <div
                            class='thumb-image-container'
                            :class="{'thumb-image-controller':thumbIndex===index}"
                    >
                      <img :src="thumbUrl"/>
                    </div>
                    <div
                            class='star-image-container'
                            :class="{'star-image-controller':starIndex===index}"
                    >
                      <img :src="starUrl"/>
                    </div>
                  </div>
                </div>
                <div class="task-list-item-detail-tags-container">
                  <div class="task-list-item-detail-tag-item">任务分类</div>
                  <div class="task-list-item-detail-tag-item ml8px">任务难度</div>
                  <div class="task-list-item-detail-tag-item ml8px">任务剩余天数</div>
                </div>
                <div class='task-list-item-detail-message'>{{item.content}}</div>
              </div>
              <div class="task-list-item-detail-date-container">
                <div class="task-list-item-detail-create-date">

                  <div class="time-clock-container">
                    <div class="time-clock-wrapper">
                      <img :src="timeClockUrl"/>
                    </div>
                  </div>
                  <div>发布时间:{{item.createDate}}</div>
                </div>
                <div class="task-list-item-detail-participate">
                  <div class="mr16px"><span class="task-list-item-detail-participate-text">{{item['participateCount']}}</span>人参与</div>
                  <div><span class="task-list-item-detail-participate-text">{{item['concernCount']}}</span>人关注</div>
                </div>
              </div>
            </div>
          </div>
computed: {
    ruleTitle(val)  {
      console.log(val)
      return "<a href='https://blog.csdn.net/zl18603543572'>早起的年人的文章</a>"

    }
  },

阅读 1.5k
2 个回答

ruleTitle 你写成了计算属性

computed:{
ruleTitle(){
return function(val){
return 你的逻辑
}
}
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题