vue 点击事件中直接改变变量

在 Vue 中，我们可以通过在模板中绑定变量的方式来完成点击事件，也可以在方法中直接改变数据。

在模板中绑定变量的方式：

<template>
  <div>
    <button @click="isClicked = true">点击</button>
    <p v-if="isClicked">已点击</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClicked: false
    }
  }
}
</script>

在方法中直接改变数据的方式：

<template>
  <div>
    <button @click="onButtonClick">点击</button>
    <p v-if="isClicked">已点击</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClicked: false
    }
  },
  methods: {
    onButtonClick() {
      this.isClicked = true;
    }
  }
}
</script>

两种方式都可以实现点击按钮后改变变量的值。需要注意的是，在 Vue 中修改数据时，应该遵循“单向数据流”的原则，即只能在组件的 data 中修改数据，而不能直接修改父组件传递给子组件的 prop 数据。