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)}"

<template>
 <p>
 <p class=&#39;mycolor&#39; :class="{&#39;colordisplay&#39;:display}"><span>1.1我的对象更改&&绑定test</span></p>
 </p>
</template>
<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 display: true
 }
 },
 mounted() {},
 computed: {},
 methods:{}
 }
</script>
<style>
 .colordisplay {
 display: inline;
 background: red;
 border: 1px solid blue
 }
</style>

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

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

1.2:内联样式：

v-bind:style='mycolor'

template

<p :style=&#39;mypagestyle&#39;><span>1.2我的样式内联更改&&绑定test</span></p>

data

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

1.3:数组语法：

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

<p :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></p>

然后设置返回的数据为

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

2.计算属性

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

<p class=&#39;computed&#39; :class=&#39;compuretu&#39;>2.计算属性判断</p>

将计算属性的返回值作为类名，通过判断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 来获取样式，来完成对其样式的更改：示例如下：

<template>
<p>
<p style=“color: green;” ref="abc"><span>我的test</span></p>
</p>
</template>
<script>
export default {
name: &#39;mytest&#39;,
data() {
return {}
},
mounted() {console.log(this.$refs.abc.style.cssText)}
}
<script>
<style>
</style>

说明：

1.ref被用来给元素（子组件）注册引用信息；

2.vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）；

使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

上述会将style的内容全部输出（color: green;）

这样的话对其进行更改就可以对相应的属性直接更改（this.$refs.abc.style.color=red

여러 클래스 바인딩을 설정하려는 경우 일반 객체 키와 동일합니다 -값 쌍. 쉼표로 구분하세요. v-bind:class="{'colordisplay':display,'ispay':pay}"

1.2: 인라인 스타일:

v -bind:style='mycolor'

template🎜

<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 serd:true,
 slid:true,
 mycss: {
  color: &#39;&#39;
 },
 mypagestyle:{
  color: &#39;yellow&#39;,
  background:"blue"
 },
 myarr:{
  color: &#39;white&#39;
 },
 myarrtest:{
  background:&#39;#000&#39;,
  display:&#39;inline&#39;
 },
 display: true
 }
 },
 mounted() {　　
 console.log(this.$refs.abc.style.cssText)
 this.$refs.abc.style.color = &#39;red&#39; //修改属性
 this.$refs.abc.style.background = &#39;black&#39; //新增属性
 this.$refs.abc.style.display = &#39;inline&#39; 
 console.log(111)　
 console.log(this.$refs.abc.style.display)　
 },
 computed: {
 compuretu: function() {
 return {
  compuretu: this.serd && this.slid
 }
 }
 },
 methods:{
 
 }
 }
</script>

🎜data🎜rrreee🎜1.3: 배열 구문: 🎜🎜배열을 통해 바인딩할 수도 있습니다. v-bind:style='[mycolor1,mycolor2 ] '🎜rrreee🎜 그런 다음 반환된 데이터를 🎜rrreee🎜🎜2로 설정합니다. 계산된 속성 🎜🎜🎜은 계산된 속성을 통해 계산할 수도 있습니다(더 복잡한 판단에 적합) 스타일 🎜rrreee🎜은 계산된 속성을 클래스 이름으로, serd 및 Slide의 값을 판단하여 스타일 표시 여부를 제어합니다🎜rrreee🎜스타일 설정🎜🎜.compuretu{color:white;Background: red}🎜🎜 🎜3. 노드 조작🎜🎜 🎜vue 자체가 가상 돔이므로 문서를 통해 노드 스타일을 변경하면 '스타일'이 정의되지 않음 오류가 발생할 수 있습니다. 🎜🎜이 문제를 해결하려면 더 높은 수준이 필요합니다. vue에 대한 이해를 돕기 위해 vue 자체의 주기적 마운트 함수에서 ref 및 $refs를 사용하여 스타일을 변경할 수 있습니다. 예는 다음과 같습니다. 🎜rrreee🎜설명: 🎜🎜1.ref는 다음과 같습니다. 요소(하위 구성 요소) 참조 정보를 등록합니다. 🎜🎜2.vm.$refs는 ref를 등록한 모든 하위 구성 요소(또는 HTML 요소)를 보유하는 개체입니다. 🎜🎜사용법: HTML 요소에 ref 속성을 추가합니다. 그런 다음 JS vm.$refs. 속성에 전달하여 🎜🎜위에서는 스타일의 모든 내용(색상: 녹색;)을 출력합니다. 🎜🎜이런 방식으로 변경하면 해당 속성을 직접 변경할 수 있습니다( this.$refs.abc .style.color=red)🎜rrreee🎜물론, 마지막 방법이 초보자에게는 다소 이해하기 어려울 수 있으므로 처음 몇 가지 방법을 사용하는 것을 권장합니다🎜 🎜추천 학습: "🎜 vue tutorial🎜》🎜

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