Vue.js 中动态控制输入框只读属性

在 Vue.js 中，可以使用 v-bind 指令或简写方式来动态控制输入框的只读属性。

1. 使用 v-bind 指令：

<template>
  <div>
    <input type='text' :readonly='isReadOnly' />
    <button @click='toggleReadOnly'>Toggle Readonly</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isReadOnly: true
    };
  },
  methods: {
    toggleReadOnly() {
      this.isReadOnly = !this.isReadOnly;
    }
  }
};
</script>

在上述代码中，使用 ':readonly='isReadOnly'' 来动态绑定只读属性，'isReadOnly' 是一个响应式的数据，通过 'toggleReadOnly' 方法可以切换只读属性的值。

2. 使用简写方式：

<template>
  <div>
    <input type='text' :readonly='isReadOnly' />
    <button @click='toggleReadOnly'>Toggle Readonly</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isReadOnly: true
    };
  },
  methods: {
    toggleReadOnly() {
      this.isReadOnly = !this.isReadOnly;
    }
  }
};
</script>

在上述代码中，使用 ':readonly' 来表示只读属性，当 'isReadOnly' 为 'true' 时，输入框为只读，否则可以编辑。通过 'toggleReadOnly' 方法切换 'isReadOnly' 的值。