Shulou(Shulou.com)06/02 Report--

Vue how to dynamically bind class and style, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

First, give some examples and apply them according to your needs.

: class= "['content', {' radioModel':checkType}]": class= "['siteAppListDirNode', {open:appitem.open==true}]": class= "[' portalCenterMenu', {height:checkType?'423px':'385px'}": src= "userInfo.userFace?userInfo.userFace:defaultHead"] ": class=" {showcutMenuHideNav} ": src="

Let's look at the detailed explanation.

At the core of Vue.js is a responsive data binding system that allows us to "bind" DOM to the underlying data using special syntax in ordinary HTML templates. The bound DOM will be synchronized with the data, and the corresponding DOM view will be updated whenever the data changes. Based on this feature, it becomes very simple to dynamically bind class through vue.js.

1. Data binding

The vue instruction is marked with a v-prefix, and the data binding instruction v-bind: attribute name, abbreviated as: attribute name. A simple example of data binding is as follows:

Aaa abbreviation: aaa

two。 Dynamically bind class

The delimiter of vue is {{}} by default, and the string in the delimiter is regarded as a data variable. You can set class by class= "{{className}}". However, vue does not recommend this method to be mixed with v-bind:class. You can only choose one of the two. Although v-bind:class cannot coexist with the way variables are bound in the class attribute, it can coexist with the native class feature, which allows both native class and v-bind:class to appear in a DOM tag.

2.1 v-bind:class supports string type, which is not recommended because the string value is fixed and cannot realize the requirement of dynamically changing class.

HTML code: HTML:Demo1 after Demo1 rendering

2.2 v-bind:class supports data variables, and when the value of the variable changes, class will be updated at the same time. The value of the v-bind:class instruction is limited to a binding expression, such as an javascript expression

HTML Code: Demo2 Javascript Code: data: {classA: 'class-a' / / class will be updated when classA changes.

Rendered HTML:

Demo2

Values written in instructions are treated as expressions, such as javascript expressions, so v-bind:class accepts trinomial operations:

HTML code: HTML:Demo3 after Demo3 rendering

2.3 v-bind:class supports objects, and class will be updated dynamically when the object changes.

HTML code: Demo4 Javascript code: data: {isA: false, / / when isA changes, class isB: true / / when isB changes, class} rendered HTML:Demo4HTML code: Demo5 Javascript code: data: {objectClass: {class-a: true, class-b: false}}

Rendered HTML:Demo5

2.4.The v-bind:class supports arrays. When the variables in the array change, the class list will be updated dynamically.

HTML code: Demo6 Javascript code: data: {classA: 'class-a', classB:' class-b'} rendered HTML:Demo6

The array can contain the object type, the object object in the array changes, and the class list is updated

HTML code: Demo7 Javascript code: data: {classA: 'class-a', objectClass: {classB:' class-b', / / classB is class-b, then the value of classB is added to the class list classC: false, / / classC value is false, classC classD: true / / classD value is true,classC will be directly added to the class list}} is it helpful for you to read the above after rendering HTML:Demo7? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.