이 글은 Vue의 Mustache 보간 구문과 v-bind 명령을 소개합니다. 도움이 되길 바랍니다!
⭐⭐mustache 구문: "beard"을 의미하며, 삽입된 태그가 콧수염처럼 보이기 때문이라고 합니다 {{}} O( ∩_∩)오하하~)
데이터를 템플릿으로 표시하기 위해 가장 일반적으로 사용되는 구문은 "Mustache" 구문(이중 중괄호) 텍스트 보간
⭐⭐
다음과 같이 작성할 수 있습니다.
<div id="app"> <h2>{{message}}</h2> <h2>当前计数:{{counter}}</h2> <!-- 2.表达式 --> <h2>计数双倍:{{counter*2}}</h2> <h2>展示的信息:{{info.split(" ")}}</h2> <!-- 3.三元表达式 --> <h2>{{age>=18?"成年人" : "未成年人"}}</h2> <!-- 4.调用methods中函数 --> <h2>{{formatDate(time)}}</h2> </div>
⭐⭐
단방향 바인딩 v-bind: 데이터는 데이터에서 페이지로만 흐를 수 있습니다
v-를 사용할 수 있습니다. a 요소의 href 속성과 img 요소의 src 속성을 동적으로 바인딩하는 것과 같은 속성을 바인딩하기 위한 바인딩
v-bind는 하나 이상의 속성 값을
<div id="app"> <!-- 1.绑定img的src属性 --> <button @click="switchImage">切换图片</button> <img v-bind:src="showImgUrl" alt="" /> <!--语法糖 v-bind: = : --> <!-- 2.绑定a的href属性 --> <a v-bind:href="href">百度一下</a> </div>
⭐⭐
1. 기본 바인딩 클래스
<h2 :class="classes">Hello World</h2>
2. 객체 구문을 작성할 수 있는 동적 클래스
<button :class="isActive ? 'active':''" @click="btnClick"> 我是按钮 </button>
3. 객체 구문 다중 키-값. 쌍으로 동적으로 바인딩된 클래스는 일반 클래스와 동시에 사용할 수 있습니다
v-bind:class에 객체를 제공하여 동적으로 클래스를 전환할 수 있습니다<button :class="{active:isActive}" @click="btnclick">我是按钮</button>
1. 일반적인 HTML 작성 방법
<button class="abc cba" :class="getDynamicClasses" @click="btnClick"> 我是按钮 </button>
2. 스타일의 일부 값은 데이터에서 옵니다
동적 바인딩 스타일이 뒤따릅니다.
<h2 style="color: aqua; font-size: 30px">hhh</h2>
3. 동적 바인딩 속성, 이 속성은 객체입니다
<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>2.4.v-bind 바인딩 속성 이름
속성 이름이 고정되지 않은 경우 사용: [속성 이름 ] = "value"
<h2 :style="objStyle">hhhhh</h2>2.5.v-bind는 객체를 직접 바인딩합니다
<div id="app"> <h2 :[name]="aaaa">Hello World</h2> </div> <script src="../lib/vue.js"></script> <script> const app = Vue.createApp({ data: function () { return { name: "class", }; }, }); app.mount("#app");
[추천 관련 영상 튜토리얼:
vuejs 입문 튜토리얼, 웹 프론트엔드 소개]
위 내용은 Vue의 Mustache 보간 구문 및 v-bind 명령에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!