Comment configurer plusieurs classes à l'aide de Vue

Cet article présente principalement l'exemple de code d'utilisation de Vue pour lier un ou plusieurs noms de classe. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

. 1 , Lier un seul nom de classe sous la forme d'une variable

Lier un seul nom de classe dans vue est facile, il suffit de l'écrire directement

<template>
 <p id="app">
 <!-- 因为是自定义属性，所以要用到 v-bind ，简写为 : -->
 <!-- 3.将 box 绑定给 p -->
 <p :class="box"></p>
 </p>
</template>

<script>
export default {
 name: &#39;app&#39;,
 data () {
 return {
 // 2.在 data 中把 yellow 赋给 box
 box: &#39;yellow&#39;
 }
 }
}
</script>

<style>
/* 1.在样式表中写好样式 */
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
</style>

Utilisez Vue pour lier un seul nom de classe

2 Lier plusieurs noms de classe sous forme de tableau

Par exemple. , nous voulons ajouter une ombre à ce p

Écrivez le style avec style

.shadow{
 box-shadow: 10px 10px 5px 0 #999;
}

Continuez à ajouter des objets de données dans data

<script>
export default {
 name: &#39;app&#39;,
 data () {
 return {
 box: &#39;yellow&#39;,
 shadow:&#39;shadow&#39;
 }
 }
}
</script>

Utilisez le tableau dans la balise Il est OK de lier le nom de la classe sous la forme

<template>
 <p id="app">
 <p :class="[box,shadow]"></p>
 </p>
</template>

.

Lier plusieurs noms de classe sous forme de tableau

3. Lier plusieurs noms de classe sous forme json

Cette méthode est pratique pour déterminer le style à afficher lors de l'ajout de plusieurs noms de classe en même temps

Écrivez d'abord le style

<style>
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
.shadow{
 box-shadow: 10px 10px 5px 0 #999;
}
</style>

Ajoutez des objets numériques dans les données pour. jugement

<script>
export default {
 name: &#39;app&#39;,
 data () {
 return {
 show1:true,
 show2:false
 }
 }
}
</script>

Liez-vous à la classe sous forme de json, modifiez les valeurs de show1 et show2 via des valeurs booléennes pour contrôler l'état de p

<template>
 <p id="app">
 <p :class="{yellow:show1,shadow:show2}"></p>
 </p>
</template>

Lier plusieurs classes sous forme json

ps : vue résout les problèmes inter-domaines

Modifier la configuration/l'index Fichier .js

proxyTable: {
// 请求到 '/device' 下 的请求都会被代理到 target： http://debug.xxx.com 中
'/v1/*': {
target: 'https://api.tiaotiao5.com',
secure: true, // 接受 运行在 https 上的服务
changeOrigin: true
}
}

Ce qui précède est tout le contenu que j'ai résumé, j'espère qu'il sera utile à tout le monde

Articles connexes :

Comment implémenter héritage multiple en JavaScript

À propos de la façon dont le service client en ligne de Wangwang implémente

Comment implémenter les effets de la souris Web (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!