Table of Contents
Use v-bind: class or v-bind:style to change its style
Home Web Front-end Vue.js How to change css style using vue

How to change css style using vue

Apr 09, 2021 pm 05:53 PM

Modification 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}".

How to change css style using vue

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.

How to change css style using vue

[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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is Vuex and how do I use it for state management in Vue applications? What is Vuex and how do I use it for state management in Vue applications? Mar 11, 2025 pm 07:23 PM

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 How to configure the watch of the component in Vue export default Mar 04, 2025 pm 03:30 PM

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)? What are the key features of Vue.js (Component-Based Architecture, Virtual DOM, Reactive Data Binding)? Mar 14, 2025 pm 07:05 PM

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 implement advanced routing techniques with Vue Router (dynamic routes, nested routes, route guards)? Mar 11, 2025 pm 07:22 PM

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 create and use custom plugins in Vue.js? Mar 14, 2025 pm 07:07 PM

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

How do I configure Vue CLI to use different build targets (development, production)? How do I configure Vue CLI to use different build targets (development, production)? Mar 18, 2025 pm 12:34 PM

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? What is Vue Router and how do I use it for single-page application (SPA) navigation? Mar 11, 2025 pm 07:21 PM

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 How to configure the lifecycle hooks of the component in Vue Mar 04, 2025 pm 03:29 PM

How to configure the lifecycle hooks of the component in Vue

See all articles