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='mycolor' :class="{'colordisplay':display}"><span>1.1我的对象更改&&绑定test</span></p> </p> </template> <script> export default { name: 'mytest', 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='mypagestyle'><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='computed' :class='compuretu'>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: 'mytest', 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: 인라인 스타일: template🎜🎜data🎜rrreee🎜1.3: 배열 구문: 🎜🎜배열을 통해 바인딩할 수도 있습니다.
我的单个class属性的test
1.1我的对象更改&&绑定test
1.3我的样式内联更改&&绑定test
<p :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></p> <p class='computed' :class='compuretu'>2.计算属性判断</p>3.我的dom更改test
<script> export default { name: 'mytest', data() { return { serd:true, slid:true, mycss: { color: '' }, mypagestyle:{ color: 'yellow', background:"blue" }, myarr:{ color: 'white' }, myarrtest:{ background:'#000', display:'inline' }, display: true } }, mounted() { console.log(this.$refs.abc.style.cssText) this.$refs.abc.style.color = 'red' //修改属性 this.$refs.abc.style.background = 'black' //新增属性 this.$refs.abc.style.display = 'inline' console.log(111) console.log(this.$refs.abc.style.display) }, computed: { compuretu: function() { return { compuretu: this.serd && this.slid } } }, methods:{ } } </script>
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!