Блог

Главная - Вопросы по программированию - Выделите только одну часть строки жирным шрифтом в vuejs

Выделите только одну часть строки жирным шрифтом в vuejs

#string #vue.js

#строка #vue.js

Вопрос:

У меня есть строка текста, содержащая число. Я просто хотел выделить жирным шрифтом номер, а не остальной текст. есть ли простой способ сделать это возможным в vue js?

   <a :href="detailUrl">
    {{ content }}
    <span v-if="detailText amp;amp; detailUrl" class="notification-detail-link"
      >{{ detailText }} >></span
    >
  </a>

Переменная содержимого используется в качестве реквизита. Эта переменная содержит строку текста с номером, который я хотел бы выделить жирным шрифтом

Ответ №1:

Используйте вычисляемое свойство textBoldNumbers , основанное на вашей prop директиве use v-html , для его отображения :

 props:["detailText "],

computed:{
  textBoldNumbers(){
      return this.detailText.replace(/([0-9])/g, "<b>$1</b>")
   }
}

шаблон :

  <a :href="detailUrl">
    {{ content }}
    <span v-if="detailText amp;amp; detailUrl" 
    class="notification-detail-link"
    v-html="textBoldNumbers"
     > </span
    >
  </a>

ПРИМЕР

 Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      detailText: "aaa 98 vvv ddd 7 98"
    }
  },
  computed: {
    textBoldNumbers() {
      return this.detailText.replace(/([0-9])/g, "<b>$1</b>")
    }
  }
})  
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <span v-html="textBoldNumbers"> </span>

</div>

Комментарии:

1. Спасибо за ваш ответ, но речь идет не о переменной detailtext. Речь идет о переменной содержимого, эта переменная содержит число, которое я хотел бы выделить жирным шрифтом. Она находится над ней

2. просто замените this.detailText на this.content then <span v-html="textBoldNumbers"></span> вместо {{content}}