vue 학습 노트 요약 (v - bind 동적 바 인 딩 속성)
1. v - bind 기본 사용
v-bind 데이터 와 요소 속성 을 바 인 딩 하 는 데 사용 되 며, : 약자 로 사용 할 수 있 습 니 다.<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf">a>
<img :src="imgURL" alt="">
<a :href="aHerf">a>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
message:" ",
imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
aHerf:"http://www.baidu.com"
}
})
script>
2. v - bind 동적 바 인 딩 클래스
v-bind 명령 을 통 해 DOM 요소 의 동적 바 인 딩 class 를 할 수 있 습 니 다.예 를 들 어
class = active 을 추가 하고 active 는 텍스트 색상 을 빨간색 으로 수정 하 며 단 추 를 누 르 면 active 가 연결 되 는 지 여 부 를 제어 하여 텍스트 색상 의 전환 을 실현 합 니 다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind class( )title>
<style>
.active{
color:red;
}
style>
head>
<body>
<div id="app">
<h2 class="title" :class="{active:isActive}">{{message}}h2>
<h2 class="title" :class="getClasses()">{{message}}h2>
<button @click="change"> button>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
message:" ",
active:"active",
isActive:true
},
methods: {
change(){
this.isActive = !this.isActive
},
getClasses(){
return {active:this.isActive}
}
},
})
script>
body>
html>
<div id="app">
<h2 class="title" :class="['active','line']">{{message}}h2>
<h2 class="title" :class="[active,line]">{{message}}h2>
<h2 class="title" :class="getClasses()">{{message}}h2>
div>
<script>
const app = new Vue({
el:"#app",
data:{
message:" ",
active:"aaaa",
line:'bbbb'
},
methods: {
getClasses(){
return [this.active,this.line]
}
},
})
script>
v - bind 동적 바 인 딩 스타일
<h2 :style="{fontSize:'50px'}">{{message}}h2>
<h2 :style="{fontSize:fontSize}">{{message}}h2>
<h2 :style="getStyle()">{{message}}h2>
<div id="app">
<h2 :style="[baseStyle]">{{message}}h2>
<h2 :style="getStyle()">{{message}}h2>
div>
<script>
const app = new Vue({
el:"#app",
data:{
message:" ",
baseStyle:{backgroundColor:'red'}
},
methods: {
getStyle(){
return [this.baseStyle]
}
},
})
script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
