vue v-if 动态设置只读

在Vue中，`v-if`指令用于条件渲染元素。如果你想根据某个条件动态地设置一个输入框（如`<input>`）为只读状态，你可以结合`v-if`和`readonly`属性一起使用。假设有一个变量`readOnlyFlag`用来表示当前是否需要只读，示例如下：

<template>
  <input type="text" :readonly="readOnlyFlag" v-model="value">
  <button @click="toggleReadOnly">切换只读状态</button>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      readOnlyFlag: false, // 默认状态是可写的
    };
  },
  methods: {
    toggleReadOnly() {
      this.readOnlyFlag = !this.readOnlyFlag; // 点击按钮时切换readOnlyFlag的值
    },
  },
};
</script>

当`readOnlyFlag`为`true`时，`input`将会变成只读状态，用户无法输入；点击“切换只读状态”按钮时，`toggleReadOnly`方法会被调用，改变`readOnlyFlag`的状态。