td class=col2 a-checkbox v-modelchecked=advicethree span建议遗传科咨询span tdtd class=col2 a-checkbox v-modelchecked=adviceone span监测血糖空腹+三餐后2小时血糖一周一次直到分娩span
在Vue 3中,可以通过ref来创建响应式数据,并且使用watch来监听advice.two的变化。当advice.two被选中时,可以通过querySelectorAll方法获取所有的span元素,并遍历它们获取内部的文本内容。同时,可以使用ref来获取a-input中的输入值。
下面是使用<script setup>解决的示例代码:
<template>
<div>
<td class="col2">
<a-checkbox v-model:checked="advice.three"/>
<span>建议遗传科咨询</span>
</td>
<td class="col2">
<a-checkbox v-model:checked="advice.one"/>
<span>监测血糖(空腹+三餐后2小时血糖,一周一次直到分娩)</span>
</td>
<td class="col2">
<a-checkbox v-model:checked="advice.two"/>
<span ref="adviceTwoSpan">监测血压,
<a-input v-model:value="day1" style="width:100px;border-style: hidden;border-bottom: 1px solid #050505;"/>
天一次,血压超过
<a-input v-model:value="bloodPressure" style="width:100px;border-style: hidden;border-bottom: 1px solid #050505;"/>
mmgh或有头昏等症状复诊
</span>
</td>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const advice = ref({
one: false,
two: false,
three: false
});
const day1 = ref('');
const bloodPressure = ref('');
watch(advice.two, (value) => {
if (value) {
const adviceTwoSpan = document.querySelectorAll('td.col2 span')[1];
const spans = adviceTwoSpan.querySelectorAll('span');
for (let i = 0; i < spans.length; i++) {
console.log(spans[i].textContent);
}
console.log(day1.value);
console.log(bloodPressure.value);
}
});
</script>
在上述代码中,使用ref定义了advice、day1和bloodPressure三个响应式数据。然后使用watch监听advice.two的变化,在选中时获取<span>内的文本内容,并输出day1和bloodPressure的值。
注意:这种方式需要通过querySelectorAll和索引来获取目标元素,如果页面结构发生改变,可能会导致无法正确获取到目标元素。建议在实际开发中,根据实际情况给目标元素添加唯一的标识符或使用其他更稳定的方式获取元素
原文地址: https://www.cveoy.top/t/topic/hPB5 著作权归作者所有。请勿转载和采集!