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

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

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

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

Add a digital object to the data for judgment

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

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!