How to set up multiple Classes using Vue-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to set up multiple Classes using Vue

Jun 12, 2018 pm 08:23 PM

vue binding

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

&lt;template&gt;
 &lt;p id=&quot;app&quot;&gt;
 &lt;!-- 因为是自定义属性，所以要用到 v-bind ，简写为 : --&gt;
 &lt;!-- 3.将 box 绑定给 p --&gt;
 &lt;p :class=&quot;box&quot;&gt;&lt;/p&gt;
 &lt;/p&gt;
&lt;/template&gt;
 
&lt;script&gt;
export default {
 name: &#39;app&#39;,
 data () {
 return {
 // 2.在 data 中把 yellow 赋给 box
 box: &#39;yellow&#39;
 }
 }
}
&lt;/script&gt;
 
&lt;style&gt;
/* 1.在样式表中写好样式 */
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
&lt;/style&gt;

Copy after login

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

Copy after login

Continue to add data objects in data

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

Copy after login

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

&lt;template&gt;
 &lt;p id=&quot;app&quot;&gt;
 &lt;p :class=&quot;[box,shadow]&quot;&gt;&lt;/p&gt;
 &lt;/p&gt;
&lt;/template&gt;

Copy after login

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

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

Copy after login

Add a digital object to the data for judgment

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

Copy after login

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

&lt;template&gt;
 &lt;p id=&quot;app&quot;&gt;
 &lt;p :class=&quot;{yellow:show1,shadow:show2}&quot;&gt;&lt;/p&gt;
 &lt;/p&gt;
&lt;/template&gt;

Copy after login

Use json form to bind multiple Classes

ps: vue solves cross-domain problems

Change config /index.js file

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

Copy after login

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

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn