4-v-bind 명령 분석(코드 포함)

이 기사의 내용은 4-v-bind 명령(코드 포함) 분석에 관한 것입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

1. 정의

1.1 v-bind 지시어는 HTML 속성을 응답적으로 업데이트하는 데 사용됩니다(v-for 제외).

2. Grammar

2.1 전체 구문: , 설명: v-bind는 명령이고, 그 뒤에 클래스가 매개변수입니다. classProperty는 공식 ​​문서에서 "예상 값"이라고 되어 있습니다.

2.2 약어 구문: , 설명: : 다음 클래스는 매개변수이며 공식 문서에서는 classProperty를 "예상 값"이라고 합니다.

3. 사용법

3.1 속성 바인딩

전체 코드 예:

<template><p>
  </p>
<p>{{title}}</p>
  <span>{{text}}</span></template><script>
    export default {
        name: "v-bindLearn",
        data() {          return {
            title: "v-bind学习",
            first: "span1",
            text: "绑定一个属性"
          }
        }
    }</script><style>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }</style>

       

약식 코드 예:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span :value="first" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        first: "span1",
        text: "绑定一个属性"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

​

3.2 인라인 문자열 철자법 코드 예를 따르세요.

<template>
<div>
<p class="p1">{{title}}</p>
<a :href="&#39;http://&#39;+first" class="spancss1">{{text}}</a>
</div>
</template>
<script>
export default {
name: "v-bindLearn",
data() {
return {
title: "v-bind学习",
first: "www.baidu.com",
  text: &#39;点击跳转到百度链接&#39;
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>

3.3 클래스 바인딩

3.3.1 객체 구문

span 태그는 객체를 바인딩합니다

메서드는 항상 템플릿에서 객체를 직접 선언하고, 객체에서 prop1 및 prop2 속성을 선언하고, 속성이 사용 가능한지 여부를 자바스크립트로 출력합니다. 속성 값이 선언된 경우 해당 값을 true로 설정하면 선언된 속성 값을 사용할 수 있습니다. 선언된 속성 값을 false로 설정하면 선언된 속성 값을 사용할 수 없습니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="{prop1:isTrue,prop2:isActive}" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        isTrue: false,
        isActive: true,
        text: "对象语法1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

방법 2는 템플릿에서 객체 이름을 직접 선언하고, javascript에서 prop1 및 prop2 속성을 선언하고 사용 가능 여부를 출력합니다. 선언된 속성 값이 true로 설정된 경우 선언된 속성 값을 사용할 수 있습니다. false로 설정하면 선언된 속성 값을 사용할 수 없습니다. 코드는 다음과 같습니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="obj" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        obj: {
          prop1: true,
          prop2: false
        },
        text: "对象语法2"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.3.2 배열 구문

방법은 템플릿에서 직접 배열 이름을 선언하고 필요한 배열 요소를 자바스크립트로 출력하는 것입니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="arr" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        arr: [&#39;prop1&#39;,&#39;prop2&#39;,&#39;prop3&#39;],
        text: "数组语法1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

방법 2: 템플릿에서 배열을 선언하고 해당 요소를 정의하고, 사용 가능한 경우 배열 정의 요소를 자바스크립트로 출력합니다. 해당 배열 요소의 속성 값을 출력하려면 해당 배열 요소의 속성 값을 false로 설정하세요. 샘플 코드는 다음과 같습니다. three는 조건에 따라 목록의 바인딩된 클래스를 전환하고, 템플릿에 배열과 조건식을 선언하고, 자바스크립트에서 배열 요소의 조건식 값을 출력합니다. 샘플 코드는 다음과 같습니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="[prop1,prop2,prop3]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: &#39;prop1&#39;,
        prop2: false,
        prop3: &#39;prop3&#39;,
        text: "数组语法2"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.4 인라인 스타일 바인딩

3.4.1 객체 구문, 템플릿에 속성을 선언하고 해당 속성 값을 자바스크립트로 출력합니다. 샘플 코드는 다음과 같습니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:class="[prop1?&#39;prop1&#39;:&#39;&#39;,prop2,prop3?&#39;prop3&#39;:&#39;&#39;,prop4?&#39;prop4&#39;:&#39;prop5&#39;,prop6?&#39;prop6&#39;:&#39;prop5&#39;]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: false,
        prop2: &#39;prop2&#39;,
        prop3: true,
        prop4: true,
        prop6: false,
        text: "数组语法3"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.4.2 배열 구문, 다중 스타일 객체는 동일한 요소에 적용될 수 있습니다

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="{background:color1,fontSize:fontSize+&#39;px&#39;}" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        color1: &#39;green&#39;,
        fontSize: 25,
        text: "绑定内联样式1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.4.3 v-bind:style이 변환과 같이 브라우저 엔진 접두사와 함께 추가되어야 하는 CSS 속성을 사용하는 경우 Vue.js는 자동으로 감지하고 추가합니다. 적절한 접두사.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: {
          background:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          fontWeight: &#39;bolder&#39;
        },
        text: "绑定内联样式1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.4.4 다중 값 바인딩, 2.3.0부터 스타일 바인딩의 속성에 대해 다중 값을 포함하는 배열을 제공할 수 있습니다. 브라우저 브라우저 접두어 없이 flexbox를 지원하면 디스플레이만 렌더링됩니다: flex

<template>
  <div>
    <p class="p1">{{title}}</p>
    <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: {
          background:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          transform: &#39;rotate(7deg)&#39;
        },
        text: "绑定内联样式1"
      }
    }
  }
</script>
<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

요약: v-bind는 하나 이상의 기능 또는 구성 요소 소품을 표현식에 동적으로 바인딩하여 DOM을 쉽게 렌더링할 수 있습니다

관련 권장 사항:

Vue에서 프로젝트의 초기 구성 프로세스( 그림 및 text)
Vue-cli가 프로젝트를 빌드한 후 디렉터리 구조 분석(그림 및 텍스트)

위 내용은 4-v-bind 명령 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!