Как вставить один шаблон в другой?

Question

Валерий

vue

Как вставить один шаблон в другой?

Как можно изменить HTML код, чтобы каждый `<div>` с текстом был обернут внутри `<div class="cost">` важно для того, чтобы получить такой результат: 

```html
<div>
  <p>1111</p>
  <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
</div>
<div>
  <p>22222</p>
  <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
</div>
```

24 июля 2024 г. 16:22

Ответы на вопрос 2

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

Answer 1

Для того чтобы каждый `<div>` с текстом был обернут внутри `<div class="cost">`, можно воспользоваться JavaScript. Можно написать скрипт, который будет искать все `<div>` с текстом и оборачивать их в `<div class="cost">`. 

Пример скрипта:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wrap Div with Cost Class</title>
</head>
<body>

<div>
  <p>1111</p>
</div>
<div>
  <p>22222</p>
</div>

<script>
  const divElements = document.querySelectorAll('div'); // выбираем все элементы div

  divElements.forEach(div => {
    const divText = div.querySelector('p'); // ищем вложенный элемент p
  
    if (divText) {
      const costDiv = document.createElement('div'); // создаем новый элемент div
      costDiv.className = 'cost'; // добавляем ему класс cost

      const titleDiv = document.createElement('div'); // создаем новый элемент div для title
      titleDiv.className = 'cost__title'; 
      titleDiv.textContent = 'test:';
  
      const numberDiv = document.createElement('div'); // создаем новый элемент div для number
      numberDiv.className = 'cost__number'; 
      numberDiv.textContent = '3 400';
  
      costDiv.appendChild(titleDiv); // добавляем элементы title и number в costDiv
      costDiv.appendChild(numberDiv);
  
      divText.parentNode.insertBefore(costDiv, divText); // вставляем costDiv перед divText
      costDiv.appendChild(divText); // добавляем divText внутрь costDiv
    }
  });
</script>
</body>
</html>
```

Этот скрипт находит каждый `<div>`, содержащий `<p>`, и оборачивает его в `<div class="cost">`, как показано в вашем примере.

Answer 2

а) Вынести в отдельный компонент. Чем компоненты меньше - тем лучше для vue. Не стесняйтесь выносить даже одиночный div. 
 <div>
  <p>1111</p>
  <v-cost />
</div>
<div>
  <p>22222</p>
  <v-cost />
</div>
 
 б) Если это какой-то массив данных - используйте v-for: 
 <div v-for="{ title } in arr" :key="title">
  <p>{{title}}</p>
  <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
</div>
 
 с) Если прям очень хочется говнять в рамках одного компонента, это можно сделать с помощью render функции, но там уже никаких шаблонов - чистый код. Тема "продвинутая", и в твоём случае явно не нужная, так разбирайся сам если хочешь.:)