Javascript для динамического форматирования списков из элементов с маркером

Question

Javascript для динамического форматирования списков из элементов с маркером

«Предел мягкой частной памяти» - это предел памяти, при котором App Engine остановит экземпляр от получения большего количества запросов, дождитесь появления каких-либо невыполненных запросов и прекратит экземпляр. Подумайте об этом как о грациозном отключении, когда вы используете слишком много памяти.

Время от времени нажимать на мягкий лимит - нормально, так как все ваши запросы заканчиваются так, как должны. Однако каждый раз, когда это происходит, ваш следующий запрос может запустить новый экземпляр, который может иметь латентное воздействие.

1

javascript vue.js

задан JGallardo 13 July 2018 в 20:36

3 ответа

var str = "This is a list of sodas * Dr. Pepper *LaCroix * 7up  *sprite * Fanta * Coke Zero *Pepsi";

//split string into an array using * as delimiter
var items = str.split('*');
//grab the first item since it's the title, not a soda
var title = items.shift();

//create an html string var
var html = `${title}<ul>`
//loop over remaining array elements and append to our html
items.forEach((el) => {
  html += `<li>${el.trim()}</li>`;
});
html += '</ul>';

//display as HTML
document.getElementById('target').innerHTML = html;

<div id="target"></div>

1

ответ дан tommyO 17 August 2018 в 12:14

Вы можете использовать regex для разделения строки и затем генерировать желаемый html

const s = 'This is a list of sodas * Dr. Pepper *LaCroix * 7up  *sprite * Fanta * Coke Zero *Pepsi';

let chunks = s.split(/\ ?\*\ ?/);


const heading = chunks[0];

chunks = chunks.slice(1);

let output = `${heading}
  <ul>
  ${chunks.map(c => `<li>${c}</li>`).join('\n')}
  </ul>
`;

console.log(output);

1

ответ дан Zohaib Ijaz 17 August 2018 в 12:14

1

Это делает то, о чем я просил, спасибо – JGallardo 13 July 2018 в 20:33

Другие вопросы по тегам:

javascript vue.js

Похожие вопросы:

Это делает то, о чем я просил, спасибо — JGallardo, 13 July 2018 в 20:33

score 1 · Accepted Answer

Следуя логике вашего приложения, вам нужно использовать v-for для заполнения элементов рецепта и преобразования вашей входной строки в объект с массивом, который будет передан рендереру:

function getRecipe (str) {
  var items = str.split('*').map(s => s.trim())
  return { title: items.shift(), items }
}

// in your Vue
Vue.use(VueMarkdown)
...
  recipe: getRecipe(taco.recipe)
...

<p>
  {{ taco.recipe.title }}
  <ul>
    <li v-for="item of taco.recipe.items">
      {{ item }}
    </li>
  </ul>
</p>

Вы также должны установить исходное состояние в пустые значения, чтобы Vue не выдавал ошибок во время инициализации:

data {
  taco: {
    name: '',
    condiment_name: '',
    condiment_recipe_url: '',
    recipe: { title: '', items: [] }
  }
}

По желанию вы можете использовать vue-markdown для визуализировать синтаксис уценки.

1

ответ дан Patrick Roberts 17 August 2018 в 12:14

1

Оххх, узнав о https://unpkg.com/vue-markdown@2.2.4/dist/vue-markdown.js, полностью помог мне в конкретном конкретном случае использования. Спасибо большое. – JGallardo 13 July 2018 в 20:32
2

Кстати, title (текст до <ul>) не отображает codepen.io/JGallardo/pen/bjNmNM – JGallardo 13 July 2018 в 21:40
3

@JGallardo, если вы удалите упаковку <vue-markdown> {{ taco.recipe.title }}, похоже, она загрузилась нормально. Вам, вероятно, потребуется просмотреть документацию , чтобы узнать, есть ли что-то, что вам нужно для настройки, или искать любые связанные с этим проблемы . Если вы не можете найти ответ на эти ресурсы, вы можете создать проблему и представить свой пример, чтобы помочь автору модуля. – Patrick Roberts 13 July 2018 в 22:08