vuejs에서 CSS를 변경하는 방법

vuejs에서 CSS를 변경하는 방법: 1. "v-bind:class" 또는 "v-bind:style" 명령을 사용하여 CSS 스타일을 수정합니다. 2. DOM을 조작하여 CSS 스타일을 직접 변경합니다.

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs에서 CSS를 변경하는 방법은 무엇입니까?

Vue.js에서 CSS를 조작(수정)하는 구체적인 방법에 대한 자세한 설명

v-bind: class 또는 v-bind:style을 사용하거나 dom을 직접 조작하여 스타일을 변경합니다.

1. v-bind:class || v-bind:style

여기서 v-bind는 명령어입니다. :다음 클래스와 스타일은 매개변수이며 클래스 뒤의 참조는 공식 문서에서 '명령어 예상 값'이라고 합니다. vue (자세히 설명할 필요는 없습니다. 어쨌든 초보자가 이름을 알면 도움이 될 것 같습니다.) 대부분의 v-bind 명령어와 동일합니다(V-for 등 일부 특수 명령어를 제외하면). ), 문자열 유형 변수를 바인딩할 수 있다는 점을 제외하면 단일 js 표현식도 지원합니다. 이는 v-bind: class의 '명령어 예상 값'이 문자열(v) 외에 객체 또는 배열일 수 있음을 의미합니다. 'v-bind:'에서 -bind는 생략 가능) .

1.1: 객체 구문:

객체를 통한 바인딩 v-bind:class="{'css class name': 표시 여부 제어(true 또는 false)}"

표시가 true이면 이번에는 일부 클래스는class="mycolor colordisplay",표시 값을 설정하여 컬러 디스플레이의 표시를 제어할 수 있습니다class="mycolor colordisplay",通过设置display的值就可以控制colordisplay的显示

如果要设置绑定多个class的话就和正常的对象键值对一样中间用逗号隔开就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"

1.2:内联样式：

v-bind:style='mycolor'

template

1.2我的样式内联更改&&绑定test

data

mypagestyle:{color: 'yellow',background:"blue"},

1.3:数组语法：

也可以通过数组来绑定v-bind:style='[mycolor1,mycolor2]'

1.3我的数组更改&&绑定test

然后设置返回的数据为

myarr:{color: 'white'}, myarrtest:{background:'#000',display:'inline'},

2.计算属性

也可以通过计算属性计算（适用于较为复杂判断）样式

2.计算属性判断

将计算属性的返回值作为类名，通过判断serd和slid的值来控制样式的显示与否

data() { return {serd:true,slid:true} }, computed: { compuretu: function() { return {compuretu: this.serd && this.slid} } }

设置样式

.compuretu{color:white;background: red}

3.操作节点

由于vue本身是虚拟dom如果通过document来进行节点样式更改的时候有可能会出现'style' is not definde的错误，

这个问题的解决方式就必须得对vue 的理解要求更高一层了，它可以通过在vue本身的周期mounted函数里用ref和$refs 来获取样式，来完成对其样式的更改：示例如下：

위 내용은 vuejs에서 CSS를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!