AlinsHTML class name
The use of HTML class names in Alins is somewhat different from that of ordinary attributes.
1. Use strings
When using a string as the class attribute value, it is not much different from the normal attribute value:
function logClass(e){
console.log(e.target.className);
}
let className = 'v1 v2';
<div $mount='#App'>
<button class='a b' onclick={logClass}>static string</button>
<button class={className} onclick={logClass}>String variable</button>
<button class={`a ${className}`} onclick={logClass}>String template</button>
</div>;2. Use objects
In Alins, objects can be used as class attribute values. The key of the object represents the class name, and the value of the object is a Boolean value, indicating whether the attribute is valid.
const classObject = {
a: true,
a1: false,
a2: true
};
function logClass(e){
console.log(e.target.className);
}
<button $mount='#App'
class={classObject}
onclick={logClass}>
Log Class
</button>3. Use Boolean expressions
The class attribute value can also use Boolean expressions
let a1Flag = false;
let a2Count = 2;
function logClass(e){
console.log(e.target.className);
}
<button $mount='#App'
class={{
a: true,
a1: a1Flag,
a2: a2Count > 1
}}
onclick={logClass}>
Log Class
</button>4. Single attribute class name
The attribute prefixed with class: represents a single-attribute class name. The part after class: of the attribute name of a single-attribute class name represents the class name. The value of the single-attribute class name is a Boolean type, indicating whether a class name needs to be used. The single-attribute class name can exist at the same time as the class attribute.
function logClass(e){
console.log(e.target.className);
}
<button $mount='#App'
class='a1 a2'
class:a3={true}
class:a4={2 < 1}
onclick={logClass}>
Log Class
</button>