VUE绑定动态事件及绑定动态属性

一、绑定动态事件

• 绑定动态事件，默认为input事件获值
• 绑定动态事件语法：@[事件类型]="事件名"
• 修改事件类型，达到不同事件相同逻辑的目的

<template>
  <div class="box">
    <!-- 绑定自定义事件，默认为input事件获值 -->
    <input type="text" v-model="data.value" @[data.eventFlag]="getValue()" />
    <!-- 修改时间为失焦事件获值  -->
    <button @click="data.eventFlag='blur'">改为失焦获值</button>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const data = reactive({
  value: "",
  eventFlag: "input",
});
const getValue = () => {
  console.log(data.value);
}
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>

二、绑定动态属性

• 绑定动态属性，默认为placeholder，占位文本显示
• 绑定动态属性语法：:[属性名]="属性值"
• 修改属性名，达到不同属性名相同属性值的目的

<template>
  <div class="box">
    <!-- 输入框定义属性，默认为占位文本显示,这里使用的原生属性，也可以定义组件用自定义属性实现-->
    <input type="text" v-model="data.value" :[data.maxlengthFlag]="6" />
    <!-- 修改属性 -->
    <button
      @click="
        data.maxlengthFlag == 'maxlength'
          ? (data.maxlengthFlag = 'placeholder')
          : (data.maxlengthFlag = 'maxlength')
      "
    >
    修改属性
    </button>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const data = reactive({
  maxlengthFlag: "placeholder",
  value: "",
});
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>