Vue.js에서 클래스를 바인딩하기 위해 v-bind를 사용할 때 주의할 사항-JS 튜토리얼-php.cn

Vue.js에서 클래스를 바인딩하기 위해 v-bind를 사용할 때 주의할 사항

高洛峰

풀어 주다： 2017-01-12 13:31:36

원래의

1753명이 탐색했습니다.

머리말

Vue.js 버전: 1.0.27에서는 Vue.js의 V-bind 명령어를 사용하여 클래스와 스타일을 바인딩할 때 Vue.js가 이를 향상시켰습니다. 문자열 외에도 표현식 결과는 객체 또는 배열일 수도 있습니다.

여기에서 테스트한 결과 다음과 같은 문제를 발견했습니다.

객체 구문을 사용하여 클래스를 바인딩하는 경우 해당 스타일을 나타내기 위해 클래스 이름을 따옴표로 묶어야 합니다. 그렇지 않으면 객체의 속성으로 간주되어 초기화 오류가 발생합니다.

<!DOCTYPE html> 
<html> 
  
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 
  
 .class-a { 
 color: #FF0000; 
 } 
  
 .class-b { 
 text-decoration: underline; 
 } 
 </style> 
</head> 
  
<body> 
 <div id="app"> 
 <div v-bind:class="classObject"> 
 关于class的绑定 
 </div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: &#39;#app&#39;, 
 data: { 
 classObject: { 
 //&#39;class-a&#39;,不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成&#39;class-a&#39;,用引号括起来。 
 //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。 
 &#39;class-a&#39;:false, 
 &#39;class-b&#39;: true 
 } 
 } 
 }); 
 </script> 
</body> 
  
</html>

로그인 후 복사

참고:

Vue.js 공식 홈페이지----http://cn.vuejs.org/guide/class-and-style.html

보충:

여기서 코드의 classObject는 약간 해시 테이블과 비슷하고 키는 스타일 클래스, 값은 부울 유형 값이라는 느낌이 듭니다.

콘솔에서 classObject 객체의 class-a 값을 가져와 변경합니다. 아래 그림을 참조하세요.

Vue.js에서 클래스를 바인딩하기 위해 v-bind를 사용할 때 주의할 사항

다음 그림을 참조하세요. 콘솔에서 classObject가 실제로 해시 테이블 유형과 약간 비슷하다는 것을 느껴보겠습니다. 이를 확인하려면 소스 코드를 살펴보세요(ps: 제가 직접 본 것은 아닙니다).

Vue.js1.0.19에 작성자는 몇 가지 구문을 추가했습니다. 객체 구문은 배열에서도 사용할 수 있습니다.

클래스 바인딩

class 바인딩

위에서 classA는 따옴표를 사용하거나 사용하지 않고 추가할 수 있습니다. 다음은 제가 직접 만든 테스트 코드입니다.

<!DOCTYPE html> 
<html> 
  
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 
  
 .class-a { 
 color: #FF0000; 
 } 
  
 .classB { 
 text-decoration: underline; 
 } 
  
 .classC{ 
 text-shadow: 2px 2px 4px #000000; 
 } 
 </style> 
</head> 
  
<body> 
 <div id="app"> 
 <!-- 两种绑定：加引号和不加引号，都可以 --> 
 <div v-bind:class="[classA, { &#39;classB&#39;: isB, &#39;classC&#39;: isC }]">class绑定</div> 
 <div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: &#39;#app&#39;, 
 data: { 
 classA: &#39;class-a&#39;, 
 isB: true, 
 isC: true
 } 
  
 }); 
 </script> 
</body> 
  
</html>

로그인 후 복사

요약

이 글의 내용이 모두의 공부나 업무에 조금이라도 도움이 되었으면 좋겠습니다. 의사 소통을 위해 메시지를 남길 수 있습니다.

Vue.js에서 클래스를 바인딩하기 위해 v-bind를 사용할 때 주의 사항에 대한 자세한 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!