My mvvm framework V3 tutorial -- class name Switching

Class binding is used to add or delete class names

There are three forms

Data-class = "object": an object is an object in the VM. Its key name is the class name. The true or false values determine whether to delete or add the object.

Data-class-classname = "Boolean", classname is the name of the class to be processed, and the value is a Boolean value, used to determine whether to delete or add.

Data-class = "string", string is the name of the class you want to add.

 
<Style>. my-class {color: yellow; Background: orange ;}. your-class {Line-Height: 3; width: 200px; Height: 100px ;}. his-class {text-indent: 2em; font-size: 14px ;}. single {width: 200px; Height: 100px; Background: lightgreen ;} </style> <Div data-class = "classes"> add multiple class names </div> <Div data-class-single = "single"> Add only one class name </div>
 

Require ("aveon, ready", function ($) {var Vm = $. mvvm. render ({classes: {"My-class": True, "Your-class": True, "his-class": true}, "single ": true });})
 

Example Add multiple class names to add only one class name