Чтобы добавить класс для тега <body> во Vue, вам нужно использовать объект data в экземпляре Vue и свойство class в качестве значения. Затем вы можете привязать это свойство к тегу <body> с помощью директивы v-bind.
Вот пример, как это можно сделать:
<!DOCTYPE html>
<html>
<head>
<title>Пример Vue.js</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Пример Vue.js</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
bodyClass: 'custom-class'
}
});
</script>
</body>
</html>
В этом примере мы создали новый экземпляр Vue и привязали его к элементу с идентификатором #app. Затем мы добавили свойство bodyClass со значением 'custom-class' в объект data.
Теперь мы можем привязать это свойство к тегу <body>, используя директиву v-bind:class. В модульной системе правил CSS (например, в styles.css) можно определить стили для класса custom-class:
.custom-class {
background-color: red;
}
Теперь, когда вы запустите приложение Vue, класс custom-class будет добавлен к тегу <body> и будет применен к нему стиль из файла styles.css.
Учитывайте, что для работы этого кода необходимо подключение библиотеки Vue.js. Вы можете использовать CDN-ссылку на скрипт Vue.js, как в этом примере, или установить Vue.js локально и подключить его локально.