vue.js에서 v-bind는 무엇을 의미합니까?

vue.js의 [v-bind]는 여러 속성 값을 바인딩하거나 컴포넌트처럼 props 값을 생성하는 데 사용됩니다. [v-bind]에는 해당 구문 설탕이 있는데, 이는 간결화에 도움이 됩니다. 구문.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

v-bind 소개

앞서 배운 지침의 주요 기능은 템플릿의 콘텐츠에 값을 삽입하는 것입니다.

그러나 동적으로 결정해야 하는 콘텐츠 외에도 특정 속성을 동적으로 바인딩하려고 합니다.

• 예를 들어 a 요소의 href 속성을 동적으로 바인딩

• 예를 들어 img 요소의 src 속성을 동적으로 바인딩

이 때 v-bind를 사용하여 다음을 지정할 수 있습니다.

• 함수: 동적 바인딩 속성

• 약어:

• 예상: any(인수 있음) | object(인수 제외)

• 매개변수: attrOrProp(옵션)

v-bind 기본 사항

v-bind 여러 속성 값을 바인딩하거나 컴포넌트처럼 props 값을 생성하는 데 사용됩니다. (이 내용은 컴포넌트 학습 시 소개하겠습니다.)

개발 시 동적으로 바인딩해야 하는 속성은 무엇인가요?

예를 들어 사진 링크(src), 웹사이트 링크(href), 일부 클래스, 스타일 등을 동적으로 바인딩합니다.

예를 들어 Vue 인스턴스의 데이터를 통해 요소의 src 및 href를 바인딩하는 코드는 다음과 같습니다.

<div id="app">
    <a v-bind:href="link">Vuejs官网</a>
    <img v-bind:src="logoUrl" alt=""/>
    
    <!-- 当然也可以通过语法糖“:”缩写v-bind -->
    <!-- <img :src="logoUrl" alt=""/> -->
</div>
<script src="/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            logoUrl:"http://vuejs.org/images/logo.png",
            link:"https://vuejs.org"
        }
    })
</script>

v-bind 구문 설탕

v-bind에는 해당 구문 설탕이 있는데, 이는 약어입니다.

개발 중에는 더 간결하기 때문에 일반적으로 구문 설탕 형식을 사용합니다.

약어는 다음과 같습니다.

<div id="app">
    <a :href="link">Vuejs官网</a>
    <img :src="logoUrl" alt=""/>
</div>

v-bind 바인딩 클래스

다음과 같이 클래스를 동적으로 전환하려는 경우가 많습니다.

• 데이터가 특정 상태에 있을 때 글꼴이 표시됩니다. 빨간색으로.

• 데이터가 다른 상태일 때는 글꼴이 검은색으로 나타납니다.

클래스를 바인딩하는 방법에는 두 가지가 있습니다.

• 객체 구문

• 배열 구문

객체 구문의 의미는 클래스 뒤에 객체가 오는 것입니다.

객체 구문의 사용법은 다음과 같습니다.

用法一：直接通过{}绑定一个类
<h2 :class="{active:isActive}">Hello world</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{active:isActive,line:isLine}">Hello world</2>  
用法三：和普通的类同时存在，并不冲突
注：如果isActive和IsLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{active:isActive,line:isLine}">Hello world</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

Demo: 글꼴 색상을 전환하려면 버튼을 클릭하세요.

...
<style>
    .active{
        color:red;
    }    
</style
...
<div id="app">
<h1 v-bind:class="{active:isActive}">{{message}}</h1>
<button v-on:click="buttonClick()">颜色切换</button>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;hello world&#39;,
isActive:true
},
methods:{
buttonClick:function(){
this.isActive = !this.isActive;
}
}
})
</script>

배열 구문의 의미는 다음과 같습니다. 클래스 뒤에 배열이 옵니다.

배열 구문의 사용법은 다음과 같습니다(배열 구문은 일반적으로 덜 사용됩니다):

用法一：直接通过[]绑定一个类
<h2 :class="[active]">Hello world</h2>
用法二：也可以传入多个值
<h2 :class="[active,line]">Hello world</2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="[active,line]">Hello world</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

Demo:

... 
<style>
.active{
color: red;
}
.line{
font-size: 50px;
}
.common{
color:green;
}
</style>
...
<div id="app">
    <!-- 如果加了单引号用的就是style中的指定class，如果没有单引号用的就是vue对象中的active变量 -->
    <!-- 注：这里，下面三个类将共存-->
<h2 class="common" :class="[&#39;active&#39;,line]">Hello world</h2>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
line:&#39;line&#39;
}
})
</script>

v-bind 바인딩 스타일

v-bind:style을 사용하여 일부 CSS 인라인을 바인딩할 수 있습니다. styles

font-size

• 와 같은 CSS 속성 이름을 작성할 때 cameCase를 사용할 수 있습니다. '

• 클래스를 바인딩하는 방법에는 두 가지가 있습니다:

객체 구문

• 배열 구문

• 객체 구문의 의미는 스타일 뒤에 객체가 따라온다는 것입니다. Type

<!-- 对象key是CSS属性名称 -->
<!-- 对象value是具体赋的值，值可以来自于data中的属性 -->
:style="{coloc:currentColor,fontsize:fontsize+&#39;px&#39;}"

배열 구문의 의미는 스타일 뒤에 배열 유형이 따른다는 것입니다

<!-- 多个值以，分割即可-->
<div v-bind:style="[baseStyles,overridingStyles]"></div>

데모:

<div id="app">
<!-- 通过对象绑定style行内样式，值如果为字符串，那么将直接显示样式值 -->
<!-- <h1 :style="{color:&#39;red&#39;}">{{message}}</h1> -->
<!-- 通过变量来绑定行内样式表 -->
<!-- <h1 :style="{color:color}">{{message}}</h1> -->
<!-- 通过方法来绑定样式 -->
<!-- <h1 :style="getStyle()">{{message}}</h1> -->
<!-- 通过数组来绑定样式 -->
<h1 :style="[common,bgColor]">{{message}}</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
color: &#39;red&#39;,
common:{color:&#39;blue&#39;,fontSize:&#39;10px&#39;},
bgColor:{backgroundColor:&#39;black&#39;}
},
methods: {
getStyle: function() {
return {
color: this.color
};
}
}
})
</script>

관련 무료 학습 권장 사항: javascript

(동영상)

위 내용은 vue.js에서 v-bind는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!