我们如何在Vue JS中使用"name“或"id”属性值作为data属性？

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  props: ['name'], // 接收外部传入的name属性值
  data() {
    return {
      name: this.name // 将props中的name属性值赋值给组件中的data属性name
    }
  }
}
</script>

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 123 // 假设组件中有一个"id"属性
    }
  },
  computed: {
    name() {
      return this.id.toString(); // 将"id"属性值转为字符串，并作为计算属性"name"的值
    }
  }
}
</script>

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 123,
      name: ''
    }
  },
  watch: {
    id() {
      this.name = this.id.toString(); // 监听"id"属性的变化，并将变化后的值赋值给"name"属性
    }
  }
}
</script>