显示和隐藏 div 时,如何达到不影响后台到前端的数据传递问题

页面加载时,隐藏div,当执行某些方法后,显示div

情景: 在做绩效考核系统时,需要按照步骤显示 div 并向其传递数据,很奇怪的是,在 div 中使用了 style=" display : none " 样式时,当使用 $("#id").show(); 显示 div,发现从后台传递的数据并没有显示到页面上,此时需要重新找一种加载 div 的方式显示该 div 包含的数据。

<script type='text/javascript'>
     function hidediv(){
     document.getElementById('div1').style.display='none';
}
</script>
<body onload=hidediv()>
    <div id="div1"></div>
</body>

如图:将 onload 函数放置在 处,在页面加载时就将 div 隐藏掉。当执行后台方法后,可以使用 $("#selectGroup").show();显示 div。

可以使用防抖节流技术来监听一个v-model,并在数据发生变化调用后台接口。具体来说,可以通过以下步骤实现: 1. 引入lodash库,该库提供了debounce和throttle两个函数,可以用来实现防抖节流。 2. 在Vue组件中,使用v-model绑定数据,并通过watch监听数据的变化。 3. 在watch回调函数中,使用debounce或throttle函数包装一个发送请求的函数,并在规定的间内只能调用一次。 4. 在包装的请求函数中,调用后台接口,并将数据传递后台。 以下是一个基本的代码示例: ```javascript <template> <div> <input v-model="inputValue" @input="handleChange" /> </div> </template> <script> import { debounce } from 'lodash'; export default { data() { return { inputValue: '', }; }, watch: { inputValue: debounce(function(newValue) { this.sendDataToBackend(newValue); }, 1000), }, methods: { sendDataToBackend(data) { // 发送请求到后台接口,将数据传递后台 }, handleChange() { // 在input的input事件中更新数据 }, }, }; </script> ``` 在这个示例中,watch监听了inputValue的变化,并使用debounce函数包装了一个sendDataToBackend函数,规定了1000毫秒内只能调用一次。在handleChange方法中,每次用户输入更新inputValue的,从而触发watch回调函数,最终调用sendDataToBackend函数发送数据后台。需要注意的是,这里使用了debounce函数来实现防抖,也可以使用throttle函数来实现节流。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值