vuejs에서 속성을 사용자 정의하는 방법

vuejs에서는 "v-bind" 명령어를 사용하여 속성을 맞춤 설정할 수 있습니다. 이 명령어는 주로 속성 바인딩에 사용됩니다. 구문은 "v-bind:custom attribute name="attribute value""입니다. "v- 속성을 사용자 정의하기 위한 "bind" 명령의 약어는 ":attribute name="attribute value""입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vuejs의 요소에 사용자 정의 속성을 추가하는 방법

다음 시나리오가 있습니다. v-for는 10개의 하위 항목이 있는 목록을 렌더링하고 5번째 하위 항목 이후의 요소에 data-wow-delay=' 속성을 추가합니다. -item 0.8s', 구현은 다음과 같습니다.

...<ul>
    <li v-for=&#39;(item,index) in [1,2,3,4,5,6,7,8,9,10]&#39; 
        :data-wow-delay="index>5?&#39;0.8s&#39;:&#39;&#39;">{{item}}</li></ul>...

요소에 사용자 정의 속성을 추가하는 방법을 생각해 낼 수 있습니다

<el v-bind:自定义属性名="Boolean?&#39;value1&#39;:&#39;value2&#39;"></el>

물론, 클래스와 같은 공통 속성(css 속성)만 추가하면, 스타일 등의 경우 다음 방법도 사용할 수 있습니다.

<el v-bind:class="{&#39;aniamted&#39;:showAnimated}"></el>

설명: v-bind 지침

v-bind는 주로 속성 바인딩에 사용됩니다. Vue는 공식적으로 바인딩이라는 약어를 제공합니다. 예:

<!-- 完整语法 -->
v-bind:属性名="值"
<!-- 缩写 -->
:属性名="值"

관련 권장 사항: "vue.js Tutorial"

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