vue图片点击之后同时改变图片和对应的数值+1 只能点击一次

你可以使用一个 data 属性来存储当前是否已经点击过图片的状态，然后在点击图片时，根据该状态来决定是否要更新图片和对应的数值。

下面是一个示例代码：

<template>
  <div>
    <img :src="imgUrl" @click="handleClick" :class="{ 'disabled': clicked }">
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      imgUrl: 'https://picsum.photos/id/237/200/300',
      clicked: false
    }
  },
  methods: {
    handleClick() {
      if (!this.clicked) {
        this.count++
        this.imgUrl = 'https://picsum.photos/id/238/200/300'
        this.clicked = true
      }
    }
  }
}
</script>

<style>
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

在这个示例中，我们使用了一个名为 `clicked` 的 data 属性来存储当前是否已经点击过图片的状态。在 `handleClick` 方法中，我们首先判断该状态是否为 `false`，如果是，则表示当前可以执行点击操作。我们将 `clicked` 设置为 `true`，同时更新 `count` 和 `imgUrl` 的值。在模板中，我们使用 `:class` 绑定了一个 `disabled` 类名，用于表示当前图片是否已经被点击过。我们还设置了一个 `.disabled` 样式，用于将被点击过的图片变为半透明，并禁用鼠标指针。