집 >웹 프론트엔드 >JS 튜토리얼 >VueJs의 V-bind 지시어 사용 사례 분석

VueJs의 V-bind 지시어 사용 사례 분석

php中世界最好的语言원래의: 2018-06-01 11:44:071807검색

이번에는 VueJs의 V-bind 명령어 사용 사례를 분석해보겠습니다. VueJs에서 V-bind 명령어를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Introduction

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

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

1. 개요

v-bind는 주로 속성에 사용됩니다. 클래스 속성, 스타일 속성, 값 속성, href 속성 등과 같은 바인딩은 속성인 경우 v-bind 명령을 사용하여 바인딩할 수 있습니다. + 존재 여부는 isActive

객체에 더 많은 속성을 전달하여 여러 클래스를 동적으로 전환할 수 있습니다. 또한 v-bind:class 지시어는 일반 클래스 속성과 공존할 수도 있습니다. 다음 템플릿이 있는 경우:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="&#39;/path/to/images/&#39; + fileName">
<!-- class 绑定 -->
<p :class="{ red: isRed }"></p>
<p :class="[classA, classB]"></p>
<p :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<p :style="{ fontSize: size + &#39;px&#39; }"></p>
<p :style="[styleObjectA, styleObjectB]"></p>
<!-- 绑定一个有属性的对象 -->
<p v-bind="{ id: someProp, &#39;other-attr&#39;: otherProp }"></p>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<p v-bind:text-content.prop="text"></p>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

결과는 다음과 같이 렌더링됩니다.

<p v-bind:class="{ active: isActive }"></p>

isActive 또는 hasError가 변경되면 그에 따라 클래스 목록이 업데이트됩니다. 예를 들어 hasError 값이 true이면 클래스 목록은 "static active text-danger"가 됩니다 바인딩된 데이터 개체는 템플릿에서 인라인으로 정의할 필요가 없습니다

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>
  和如下 data
data: {
 isActive: true,
 hasError: false
}

렌더링 결과는 위와 동일합니다. . 반환된 객체의 계산된 속성을 여기에 바인딩할 수도 있습니다. 이것은 일반적이고 강력한 패턴입니다:

<p class="static active"></p>

Array 구문

배열을 v-bind:class에 전달하여 클래스 목록을 적용할 수 있습니다.

<p v-bind:class="classObject"></p>
data: {
 classObject: {
 active: true,
 'text-danger': false
 }
}

렌더링:

<p v-bind:class="classObject"></p>
data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
 return {
  active: this.isActive && !this.error,
  'text-danger': this.error && this.error.type === 'fatal'
 }
 }
}

원하는 경우 조건에 따라 목록의 클래스를 전환하려면 삼항 표현식

<p v-bind:class="[activeClass, errorClass]"></p>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

을 사용할 수 있습니다. 이 방법으로 errorClass는 항상 추가되지만 activeClass는 isActive가 참일 때만 추가됩니다.

그런데 조건부 클래스가 여러 개인 경우에는 이렇게 작성하기가 좀 번거롭습니다. 따라서 객체 구문은 배열 구문에도 사용할 수 있습니다

<p class="active text-danger"></p>

3. 구성 요소에 사용됨

자체 정의 구성 요소

에서 클래스 속성을 사용하면 이러한 클래스가 위 구성 요소의 루트 요소에 추가됩니다. . 이 요소에 이미 존재하는 클래스는 덮어쓰지 않습니다.明 예를 들어, 이 구성 요소를

<p v-bind:class="[isActive ? activeClass : &#39;&#39;, errorClass]"></p>

로 선언한 다음 사용할 때 Class

<p v-bind:class="[{ active: isActive }, errorClass]"></p>

html을 추가하면 다음과 같이 렌더링됩니다.

데이터 바인딩

클래스용

Rreee

isActive가 진실일 때 HTML은

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

로 렌더링됨 4. 인라인 스타일 바인딩

개체 구문

v-bind:style의 개체 구문은 매우 직관적입니다. CSS와 매우 유사해 보이지만 실제로는

JavaScript

개체입니다. CSS 속성 이름은 camelCase 또는 kebab-case를 사용하여 명명할 수 있습니다(작은따옴표로 묶어야 함):

<my-component class="baz boo"></my-component>

일반적으로 스타일 객체에 직접 바인딩하는 것이 더 낫습니다. 그러면 템플릿이 더 명확해집니다.

<p class="foo bar baz boo">Hi</p>

마찬가지로 객체 구문은 다음과 같습니다. 반환된 객체의 계산된 속성과 함께 자주 사용됩니다

배열 구문

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

<p v-bind:style="[baseStyles, overridingStyles]"></p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

VueJs의 V-bind 지시어 사용 사례 분석

관련 기사