vuejs
속성과 이벤트의 동적바인딩 및 디렉티브 사용예제
1.속성을 동적바인딩하는 방법
객체명 = { id : 'id명'}
<요소명 v-bind="객체명" >
2.이벤트 동적바인딩
@[eventName]=이벤트핸들러
3.속성 동적바인딩
const attrName='속성명'
<요소명 :[attrName]="'동적으로 속성을 등록합니다'" >
4~5.css 디렉티브 / v-text 디렉티브 사용예제
(아래의 예제 직접확인)
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
// 1.속성을 동적 바인딩
const objectOfAttrs = {
id: 'id-selector',
class: 'class-selector1'
}
// 2.이벤트 동적 바인딩
const eventName='click'
const eventHandler=function(){alert(1)}
// 3.속성 동적 바인딩
// 4.css 클래스의 디렉티브 사용예제
// 5.v-text의 디렉티브 사용예제
const attrName = 'id'
const classA = 'red-font'
</script>
<template>
<!-- 1.속성을 동적 바인딩 -->
<h1 v-bind="objectOfAttrs" >{{ msg }}</h1>
<input v-model="msg" />
<!-- 2.이벤트 동적 바인딩 -->
<button @[eventName].once.middle="eventHandler">동적버튼</button>
<!--
.once - 이벤트가 한 번만 트리거 됨(일회용처럼).
.left - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.
.right - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.
.middle - 마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.
-->
<!-- 3.속성 동적 바인딩 (기본적으로 :html속성명 으로 사용가능하다. 그 속성명을 동적으로 변경한 예제 ) -->
<!-- 4.css의 클래스의 디렉티브 사용예제 -->
<!-- 5.v-text의 디렉티브 사용예제 -->
<div
:[attrName]="'동적으로 속성을 등록합니다'"
:class="[classA, { 'class-selector1' : true }]"
v-text="'이건 {{ }} 을 사용하는것과 동일합니다 '"
/>
</template>
<style>
#id-selector{
color:darkorange;
}
.class-selector1{
border: 1px darkgreen solid;
}
.red-font{
color: darkred;
}
</style>
참고