На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 11. Директивы v-text, v-once, v-pre и v-html Vue 3



Сегодня мы немного расширим и углубим уже имеющиеся знания по директивам Vue. Сначала, если хотите, то перечитайте уроки и попробуйте без подглядывания в них создать с нуля небольшое приложение на Vue (страничку), на которой, например, по нажатию кнопок будет добавляться или убавляться день недели. Справились? Отлично, пойдем дальше.

Директива v-text

На предыдущих уроках по Vue мы использовали интерполяцию для вывода текста в шаблон. То есть заключали в двойные фигурные скобки переменную и вставляли такую конструкцию в нужном месте. Примерно так:

<div>{{upread}}</div>
Однако, есть и альтернативный вариант того же самого – это директива v-text. Теперь примерно вот так:

<div v-text="upread"></div>
Директива v-once

Пишем так:

<div v-text="upread"></div>

<div v-once ="upread"></div>

<button @click="title = 'новый upread">Щелк!</button>
И теперь v-once будет всегда показывать upread, сколько бы мы ни кликали по кнопке. А вот верхний див будет меняться.

Директива v-pre

Название данной директивы это отсылка к тегу <pre> - то есть тег цитирования. Пример использования v-pre

<div v-pre >{{upread}}</div>
Выведет просто {{upread}}

Директива v-html

Данная директива позволяет выводить html-элементы. Файл html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>upread.ru</title>
</head>
<body>
    <div v-html="upHtml"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>
Файл app.js

Vue.createApp({
    data: () => ({
      upHtml: '<a href="https://upread.ru/blog/new">Новости блога</a>'
    })
  }
).mount('#app')




Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



тегистатьи IT, Уроки по Vue, Vue, директивы

Читайте также:




Анализ алгоритмов: классификация
Бесплатный перенос сайта и настройка доступа по https


© upread.ru 2013-2022
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.