How to change css style using vue
Apr 09, 2021 pm 05:53 PMModification method: 1. Use the "v-bind:class" command to add a style, the syntax is "v-bind: class{css style: execution condition}"; 2. Use the "v-bind:style" command Modify the style with the syntax "v-bind:style{css style: execution condition}".
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
Use v-bind: class or v-bind:style to change its style
where v-bind is the instruction, :
is the following class and style are parameters, and the value after class is called the 'instruction expected value' in the official documentation of vue (there is no need to go into this, anyway, I think it is useful for beginners to know what his name is). It is the same as v-bind Most instructions (except some special instructions such as V-for) are the same.
In addition to being able to bind string type variables, it also supports a single js expression, that is to say v-bind: the 'instruction expected value' of class
is other than string It can also be an object or array (v-bind in 'v-bind:' can be omitted).
Grammar:
calss syntax format=> :class="{ ' a ' : f }"
a represents the added css style , f represents the execution condition. If the condition is met, the written CSS style will be added. Used to add Css style
style syntax format=>: style=”{ ’ Q ’ : R }”
Q represents the specific modified Css style, and R represents the modified value. Used to modify a certain CSS style.
[Related recommendations: "vue.js tutorial"]
The above is the detailed content of How to change css style using vue. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

What is Vuex and how do I use it for state management in Vue applications?

How to configure the watch of the component in Vue export default

What are the key features of Vue.js (Component-Based Architecture, Virtual DOM, Reactive Data Binding)?

How do I implement advanced routing techniques with Vue Router (dynamic routes, nested routes, route guards)?

How do I create and use custom plugins in Vue.js?

How do I configure Vue CLI to use different build targets (development, production)?

What is Vue Router and how do I use it for single-page application (SPA) navigation?

How to configure the lifecycle hooks of the component in Vue
