前端进行转化成yyyy-MM-dd格式、在页面的一个区域打开一个页面的写法、jquery中选中单选框的方法

本文介绍三种前端实用技巧:一是如何将后端传入的Date类型数据转化为yyyy-MM-dd格式;二是在页面内局部加载新页面的方法,实现页面的动态更新而无需整体刷新;三是使用jQuery轻松选中指定的单选框。

前端进行转化成yyyy-MM-dd格式、在页面的一个区域打开一个页面的写法、jquery中选中单选框的方法

1、jsp页面后端传入Date类型,前端进行转化成yyyy-MM-dd格式
<fmt:formatDate value='${person.dateTime}' pattern='yyyy-MM-dd'></fmt:formatDate>
2、在页面的一个区域打开一个页面的写法
<div id='contains'>页面显示区</div>
<a href="javascript:;" οnclick="$('#contains').load('${pageContext.request.contextPath}/goprovider_list')">点击在页面显示</a>
//注意:href="javascript:;" 表示页面不跳转
3、jquery中选中单选框的方法
<script language="javascript">
//获取网页中name=angel的单选按钮,取第一个,添加属性checked=checked,也就是让其选中
$("input[name=angel]:eq(0)").attr("checked",'checked');
</script>
在使用 `el-form` 表单时,设置 `el-radio` 单选框组默认选中方法是通过 `v-model` 绑定一个变量,并将该变量初始化为某个特定值,该值应与某个 `el-radio` 的 `label` 属性值一致。这样,该单选框将在页面加载时默认被选中。 ### 使用 `label` 属性设置默认值 在 Vue 中使用 `Element UI` 的 `el-radio` 组件时,确保 `v-model` 绑定的变量与某个 `el-radio` 的 `label` 值匹配,即可实现默认选中。例如: ```html <el-form :model="form"> <el-form-item label="选项"> <el-radio-group v-model="form.radio"> <el-radio label="1">选项一</el-radio> <el-radio label="2">选项二</el-radio> <el-radio label="3">选项三</el-radio> </el-radio-group> </el-form-item> </el-form> <script> import { ref } from 'vue'; export default { setup() { const form = ref({ radio: '1', // 默认选中 label 为 '1' 的选项 }); return { form }; }; </script> ``` 在上述代码中,`form.radio` 初始化为 `'1'`,这与第一个 `el-radio` 的 `label` 值一致,因此该选项将默认被选中 [^4]。 ### 数值类型处理 如果单选框的值是数字类型,例如 `0` 或 `1`,需要确保 `v-model` 绑定的变量与 `el-radio` 的 `label` 值类型一致。例如: ```html <el-form :model="form"> <el-form-item label="状态"> <el-radio-group v-model="form.status"> <el-radio label="1">启用</el-radio> <el-radio label="0">禁用</el-radio> </el-radio-group> </el-form-item> </el-form> <script> import { ref } from 'vue'; export default { setup() { const form = ref({ status: '1', // 默认选中 label 为 '1' 的选项 }); return { form }; }; </script> ``` 在此示例中,`form.status` 初始化为 `'1'`,与第一个 `el-radio` 的 `label` 匹配,从而实现默认选中 [^3]。 ### 动态控制默认选中状态 如果需要在运行时动态更改默认选中状态,可以通过修改 `v-model` 绑定的变量来实现。例如,通过方法或事件触发更改: ```html <el-form :model="form"> <el-form-item label="选项"> <el-radio-group v-model="form.radio"> <el-radio label="1">选项一</el-radio> <el-radio label="2">选项二</el-radio> <el-radio label="3">选项三</el-radio> </el-radio-group> <el-button @click="setDefault">设置默认为选项二</el-button> </el-form-item> </el-form> <script> import { ref } from 'vue'; export default { setup() { const form = ref({ radio: '1', }); const setDefault = () => { form.value.radio = '2'; // 动态设置默认选中 }; return { form, setDefault }; }; </script> ``` 点击按钮时,`form.radio` 被设置为 `'2'`,从而动态更改默认选中单选框 [^2]。 ### 注意事项 - `el-radio` 的 `label` 属性值必须与 `v-model` 绑定的变量值一致,才能正确选中- 如果使用 `ref` 或其他方式获取表单数据,确保 `v-model` 的绑定正确无误。 - 在 Vue 3 的 `script setup` 语法中,使用 `ref` 时需注意 `.value` 的访问方式 [^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值