vue点击事件源对象怎么获取值

你可以使用 $event.target 获取点击事件的源对象，从而获取其属性值。例如，在一个按钮的点击事件中，可以这么写：

<button @click="handleClick">点击我</button>

methods: {
handleClick(event) {
console.log(event.target.value);
}
}

这样就可以获取到按钮的 value 值。

相关问题

VUE 把一个对象数组的指定属性的值更新到另一个对象数组的同一个属性上，示例

Vue.js 中可以使用 `v-for` 指令以及 `v-model` 或者 `Object.assign` 等方法来实现对象数组间的属性同步。假设我们有两个对象数组，一个是源数据 (`sourceData`)，另一个是目标数据 (`targetData`)，它们都有相同的结构，比如都包含 `value` 属性：

<template>
  <div>
    <ul>
      <!-- 源数据 -->
      <li v-for="item in sourceData" :key="item.id">
        {{ item.value }}
        <button @click="updateValue(item)">更新</button>
      </li>
      
      <!-- 目标数据，初始状态 -->
      <li v-for="item in targetData" :key="item.id" :value="item.value">
        {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceData: [
        { id: 1, value: '原始值1' },
        { id: 2, value: '原始值2' }
      ],
      targetData: []
    };
  },
  methods: {
    updateValue(item) {
      // 将源数据的value更新到目标数据对应位置，并保持双向绑定
      this.targetData.find(targetItem => targetItem.id === item.id).value = item.value;
      // 如果你想保持两数组完全同步，还可以这样做：
      // Object.assign(this.targetData, { [item.id]: { ...item, value: item.value } });
    }
  }
};
</script>

在这个例子中，当你点击 "更新" 按钮时，会找到相应索引的 `targetData` 对象，然后将它的 `value` 更新为 `sourceData` 的当前项的 `value`。由于 `v-model` 或者 `:value` 创建了双向绑定，所以对 `targetData` 的修改也会实时反映在视图上。

vue3打卡组件源代码

以下是一个简单的 Vue 3 打卡组件的源代码示例：

<template>
  <div class="clock-in">
    <h2>{{ title }}</h2>
    <p>{{ date }}</p>
    <button v-on:click="clockIn">打卡</button>
    <p v-if="clockedIn">已打卡</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  props: {
    title: String,
  },
  setup(props) {
    const state = reactive({
      date: new Date().toLocaleDateString(),
      clockedIn: false,
    });

    const clockIn = () => {
      state.clockedIn = true;
    };

    return {
      title: props.title,
      date: state.date,
      clockedIn: state.clockedIn,
      clockIn,
    };
  },
};
</script>

<style scoped>
.clock-in {
  border: 2px solid #ccc;
  padding: 10px;
  margin: 10px;
  text-align: center;
}
</style>

在这个组件中，我们定义了一个 `title` 属性作为组件的标题，使用 `props` 接收外部传入的数据。在 `setup` 函数中使用 `reactive` 创建了一个响应式对象 `state`，包含一个 `date` 属性表示当前日期，一个 `clockedIn` 属性表示是否已经打卡。同时定义了一个 `clockIn` 方法，用于将 `clockedIn` 属性设置为 `true`。最后通过 `return` 返回需要暴露给模板的数据和方法。

在模板中使用这些数据和方法，当点击 `打卡` 按钮时会触发 `clockIn` 方法，将 `clockedIn` 属性设置为 `true`，同时根据 `clockedIn` 属性的值来显示是否已经打卡的文本。最后使用 `scoped` 关键字限制样式只对当前组件有效，避免样式冲突。