Vue.js: Как удалить лишние теги?

Question

[Александр]

Здравствуйте!

Есть такая задача: показать пользователю текст, который он может видеть и удалить другой.
Вообщем есть вот такой текст:

В Европе редиска появилась благодаря итальянцу Марко Поло <span lvl='20'>, который, вернувшись из своего знаменитого путешествия, <span lvl='40'> из Китая </span> привёз семена редиса. Было это </span> в конце XIII века."

У пользователя уровень соответствует, ну пускай двум. Тогда он должен видеть

В Европе редиска появилась благодаря итальянцу Марко Поло в конце XIII века."

Если у пользователя уровень, например 30, тогда

В Европе редиска появилась благодаря итальянцу Марко Поло, который, вернувшись из своего знаменитого путешествия, привёз семена редиса. Было это в конце XIII века."

Не соображу как это сделать на vue.js (да и на javascript если честно, тоже) .
Набросал макет, но дальше не продвинусь: jsfiddle.net

Можете помочь или направить на нужный путь?

Comments

[lega]

Не vue вариант: https://jsfiddle.net/lega911/9me5x7fy/
но html один в один

Answer 1

[Evgeny Kulakov]

Велосипед: https://jsfiddle.net/kulakoff/ve4k3v3t/

Comments

[Александр]

Хм...
Интересное решение.
Благодарю!!!

Answer 2

[Eugene Budnik]

Если правильно понял задачу, то держи такой вариант:

https://jsfiddle.net/4t2mvs9k/3/

Comments

[Александр]

Более лаконичное решение ))
Правда в другом ключе (переход на другой элемент отображения), НО!
Спасибо!