vue中局部定义变量的作用域

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      let message = 'Updated message'; // 局部定义变量
      this.message = message;
    }
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      let message = 'Updated message'; // 局部定义变量
      this.message = message;
      console.log(message); // 可以在方法内部访问局部变量
    }
  }
};
</script>

<template>
  <div class="container">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<style scoped>
.container {
  background-color: red;
  color: white;
  padding: 10px;
}

p {
  font-size: 16px;
  margin: 0;
}

</style>