Details on how to use class styles in Vue
|
Vue provides us with several ways to use the class style 1. Boolean Let's first write a style with a class name of active in the style tag.
<style>
.active{
color: red;
font-size: 20px;
font-style: normal;
}
</style> Create a vm instance in our script tag and write isActive:true in the data center of the instance.true means use this style, false means do not use it
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
isActive:true
}
</script> At this point we have used class class in the v-bind directive in the tag
<div id="app">
<h1 :class="{active:isActive}">I am using Boolean value to reference class style</h1>
</div> View the output:  Now we change true to false:
data:{
isActive: false
} View the output:  2. Expression We can add an expression after the v-bind: directive and call the class when the condition is met. For example, we have an array of objects in the data center data , and render it to the view layer. I want to make the references with even indexes Class style:
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{
<!-- -->{index}}----{
<!-- -->{item.name}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"Jinx"},
{id:2,name:"Jace"},
{id:3,name:"Caitlin"},
{id:4,name:"蔚"},
]
}
})
</script> Use attribute binding class style in li:
<li v-for="(item,index) in list" :class="{active: index%2 == 0}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li> The output is:  We can also define a mark in the data center and define the value of mark to allow a row to reference the class class separately.
<li v-for="(item,index) in list" :class="{active: index === mark}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>
let vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"Jinx"},
{id:2,name:"Jace"},
{id:3,name:"Caitlin"},
{id:4,name:"蔚"},
],
mark:0
}
}) At this point only the style with index 0 is referenced, i.e. the first one:  3. Multi-class packaging
Multiple classes can be placed in an object. In the view layer, it is an object name. In the data center, it is an object that lists multiple classes.
<style>
.f50{
font-size: 50px;
}
.blue{
color: blue;
}
.background{
background-color: black;
}
</style>
<body>
<div id="app">
<p :class="classObject">Chinese</p>
</div>
</body>
let vm = new Vue({
el:"#app",
data:{
classObject:{
"f50":true,
"blue":true,
"background":true
}
}
}) The output is:  You can also customize the calculated properties, encapsulate them in a function, and return the call
let vm = new Vue({
el:"#app",
computed:{
// 1. Custom calculated property name,
// 2. What the calculated attribute does, we encapsulate it into the function myclass(){
return {
"f50":true,
"blue":true,
"background":true
}
}
}
})<p :class="myclass">Chinese</p> The output is consistent 4. You can use the class class directly in v-bind:
.f50{
font-size: 50px;
}
.blue{
color: blue;
}
.background{
background-color: black;
}
<!-- Note that the class name must be quoted-->
<p :class="['f50','blue','background']">Week after week</p> Output:  This is the end of this article about the details of how to use class styles in Vue. For more information about how to use class styles in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: A brief analysis of how MySQL implements transaction isolation
>>: Solution to the CSS height collapse problem
Recommend
Solve the problem that the commonly used Linux command "ll" is invalid or the command is not found
question: The commonly used command "ll"...
Summary of Nginx location and proxy_pass path configuration issues
Table of contents 1. Basic configuration of Nginx...
Design sharing of the download page of the Pengyou.com mobile client (picture and text)
Let's first look at some simple data: Accordin...
Detailed example of getting the maximum value of each group after grouping in MySQL
Detailed example of getting the maximum value of ...
Common methods and problems of Docker cleaning
If you use docker for large-scale development but...
Vue sample code for online preview of office files
I'm working on electronic archives recently, ...
Detailed explanation of component communication in react
Table of contents Parent component communicates w...
202 Free High Quality XHTML Templates (1)
Here 123WORDPRESS.COM presents the first part of ...
Vue+axios sample code for uploading pictures and recognizing faces
Table of contents Axios Request Qs processing dat...
MySQL partitions existing tables in the data table
Table of contents How to operate Operation proces...
Implementation of setting fixed IP when starting docker container
Network type after docker installation [root@insu...
WeChat applet implements search box function
This article example shares the specific code for...
Tutorial on installing DAMO database on Centos7
1. Preparation After installing the Linux operati...
MySQL installation tutorial under Windows with pictures and text
MySQL installation instructions MySQL is a relati...
How to use CSS custom variables in Vue
Table of contents The CSS custom variable functio...