我是Vue.js的新手。我想知道如何根據之前的下拉選單選擇來顯示下一個輸入欄位。我查看了其他論壇并嘗試實作,但沒有成功。
以下是我的代碼:
<select v-model="receive_method" id="">
<option value="cheque">Cheque</option>
<option value="eftn">EFTN</option>
<option value="cash">CASH</option>
</select>
<div v-if="receive_method =='Cheque' ">
<input type="integer" v-model="cheque_number" placeholder="Cheque Number">
</div>
如果我從下拉串列中選擇支票選項,下一個輸入欄位將出現,否則它將保持隱藏。
請幫助。
uj5u.com熱心網友回復:
你需要參考options元素的value。
如果value="cheque"是小寫的,v-if="receive_method =='cheque'"也應該如此。
這樣做。
<script setup>/span>
import { ref } from 'vue'/span>
const receive_method = ref()
const cheque_number = ref()
</script>>
<template>
< select v-model="receive_method" id="">
<option value="cheque"/span>> Cheque</option>。
<option value="eftn"/span>> EFTN</option>。
<option value="cash"/span>> CASH</option>。
</select>/span>
<div v-if="receive_method =='cheque'">/span>
< input type="integer"/span> v- model="cheque_number" placeholder="cheque Number">
</div>/span>
</template>
如果使用Options API
<script>
export default {
data() {
return {
receive_method: undefined,
cheque_number: undefined, cheque_number: >
}
}
}
</script>>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/327388.html
標籤:
