使用v-model并仍然加载初始值(如果可用

<template>
  <div>
    <!-- 文本输入框 -->
    <input type="text" v-model="message">
    <p>Message is: {{ message }}</p>

    <!-- 复选框 -->
    <input type="checkbox" v-model="checked">
    <p>Checked is: {{ checked }}</p>

    <!-- 单选按钮 -->
    <input type="radio" value="male" v-model="gender"> Male
    <input type="radio" value="female" v-model="gender"> Female
    <p>Gender is: {{ gender }}</p>

    <!-- 选择框 -->
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>Selected is: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      checked: false,
      gender: 'male',
      selected: ''
    };
  }
};
</script>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchInitialValue();
  },
  methods: {
    fetchInitialValue() {
      // 假设这是一个异步请求
      setTimeout(() => {
        this.message = 'Initial value from async request';
      }, 1000);
    }
  }
};
</script>