Как сделать что бы директива v-if руководила выводом не одного какого то блока html, например не одним тегом p, а допустим двумя или тремя, было бы очень круто если бы пример кто то показал, дальше сам думаю додумаю))
Для таких манипуляций используют специальный элемент <template>, этот тег является невидимой оберткой, которая не отображается в результате, а отображает только свое наполнение, вот пример:
var viewModel = new Vue({
el:"#vueBlock",
data: {
first:true
}
})
Первая часть кода это vue объект, который мы привязываем к блоку, и создаем свойство которое регулирует какой контент показывать.
<div id="vueBlock">
<template v-if="first" >
<h1 style="background-color: #4CAF50">Основной текст
<p style="background-color: #4CAF50" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio libero nam saepe.
<p style="background-color: #4CAF50" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos!
<template v-else >
<h1 style="background-color: #f08b18">Alternative text
<p style="background-color: #f08b18">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, repudiandae.
<p style="background-color: #f08b18">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, suscipit.
В html участке кода используя тег template который сам не отображается, задаем условия показа блока в самом этом теге, внутрь просто наполняем всем тем что должно вывестись, альтернативный вариант делается точно так же с помощью template только в этот раз нужно написать v-else, вот и вся наука.
p{
margin: 0;
padding: 0;
}
Последний участок кода это просто дефолтные отступы у тега p которые мне не понравились)