How to set up multiple Classes using Vue

This article mainly introduces the example code of using Vue to bind single or multiple Class names. It is very good and has reference value. Friends who need it can refer to it

一, Bind a single Class name in the form of a variable

Binding a single class name in vue is easy, just write it directly

<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>

Use Vue to bind a single Class name

2. Bind multiple Class names in array form

For example, if we want to give Add a shadow to this p

Write the style in style

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

Continue to add data objects in data

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

Bind the Class name in the form of an array in the tag

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

It’s OK.

Bind multiple Class names in array form

3. Bind multiple Class names in json form

This method is convenient for determining which style to display when adding multiple Class names at the same time.

Write the style first

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

Add a digital object to the data for judgment

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

Bind it to the class in the form of json, and change the values ​​of show1 and show2 through Boolean values ​​to control the status of p

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

Use json form to bind multiple Classes

ps: vue solves cross-domain problems

Change config /index.js file

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

The above is all the content I summarized, I hope it will be helpful to everyone

Related articles:

How to implement multiplexing in JavaScript Inherit

About how Wangwang online customer service implements

How to implement web mouse special effects (detailed tutorial)

The above is the detailed content of How to set up multiple Classes using Vue. For more information, please follow other related articles on the PHP Chinese website!