vue 监听两个输入框是否有值 当两个都有值才掉接口

你可以使用computed属性来监听这两个输入框的值，例如：

<template>
  <div>
    <input v-model="input1" />
    <input v-model="input2" />
    <button v-if="bothInputsFilled" @click="callApi">调用接口</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  },
  computed: {
    bothInputsFilled() {
      return this.input1 && this.input2
    }
  },
  methods: {
    callApi() {
      // 调用接口的代码
    }
  }
}
</script>

当两个输入框都有值时，就会显示“调用接口”按钮，点击该按钮可以调用接口。

相关问题

vue3怎么用ref实现将两个输入框的值用‘-’连接起来

你可以使用 `ref` 来获取输入框的值，然后在 `setup` 函数中创建一个新的变量来存储连接后的字符串。具体实现如下：

<template>
  <div>
    <input type="text" v-model="input1" ref="input1">
    <input type="text" v-model="input2" ref="input2">
    <p>连接后的值为：{{ combinedValue }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const input1 = ref('')
    const input2 = ref('')
    const combinedValue = ref('')

    watchEffect(() => {
      combinedValue.value = `${input1.value}-${input2.value}`
    })

    return {
      input1,
      input2,
      combinedValue
    }
  }
}
</script>

在模板中，我们定义了两个输入框，并使用 `v-model` 来绑定它们的值到 `input1` 和 `input2` 变量上。使用 `ref` 来获取输入框的值，这些值可以在 `setup` 函数中使用。

我们在 `setup` 函数中创建了一个名为 `combinedValue` 的变量，用于存储连接后的字符串。使用 `watchEffect()` 函数来监听 `input1` 和 `input2` 的变化，当它们的值发生改变时，会重新计算 `combinedValue` 的值。

最后，我们将 `input1`、`input2` 和 `combinedValue` 变量导出，以便在模板中使用。在模板中，我们使用 `{{ combinedValue }}` 来显示连接后的字符串。

帮我写一个输入框 可以输入带有百分比和值的两个单选框选择，来改变输入框里面的值 vue

好的，以下是一个简单的Vue组件代码示例，实现了你所描述的功能：

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <div>
      <input type="radio" id="percentage" value="percentage" v-model="inputType" />
      <label for="percentage">百分比</label>
      <input type="radio" id="value" value="value" v-model="inputType" />
      <label for="value">值</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputType: 'percentage',
      inputValue: ''
    };
  },
  watch: {
    inputType(newVal, oldVal) {
      // 如果从百分比切换到值，将原来的百分比转换为值
      if (newVal === 'value' && oldVal === 'percentage') {
        this.inputValue = (parseFloat(this.inputValue) / 100).toFixed(2);
      }
      // 如果从值切换到百分比，将原来的值转换为百分比
      if (newVal === 'percentage' && oldVal === 'value') {
        this.inputValue = (parseFloat(this.inputValue) * 100).toFixed(0);
      }
    }
  }
};
</script>

在上面的代码中，我们使用了一个v-model指令来双向绑定输入框中的值，同时使用了两个单选框来选择输入框的类型：百分比或者值。在组件的data中，我们定义了两个变量：`inputType`和`inputValue`，分别表示输入框的类型和值。在单选框的`v-model`中，我们将其绑定到`inputType`上，这样就能够实现单选框的选择。在输入框中，我们将其`v-model`绑定到`inputValue`上，这样就能够实现输入框的双向绑定。

在组件的`watch`中，我们监听了`inputType`的变化，并根据其变化来更新`inputValue`的值。如果从百分比切换到值，我们将原来的百分比转换为值，并保留两位小数。如果从值切换到百分比，我们将原来的值转换为百分比，并取整。

这样，我们就实现了一个简单的Vue组件，可以根据用户的选择来切换输入框中的值的类型。