【vue.js】+【element ui】实现按下按钮(<el-button>或<el-checkbox>)显示当前时间(21位和中国国际时间)

1、template部分

<tr>
   <th>卸货开始时间</th>
   <td>
      <el-input id="xhkssj" size="mini"  readonly/>
   </td>
   <td>
      <el-button type="primary" @click="getCurrentTime1" size="mini">显示当前时间</el-button>
      <el-checkbox v-model="checked" @change="getCurrentTime1" size="mini">显示当前时间</el-checkbox>
   </td>
</tr>

2、script部分

methods: {
   getCurrentTime1 () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      // 为小于10的数字补零
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      if (second < 10) {
        second = '0' + second
      }
      var str = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second
      document.getElementById('xhkssj').value = str
    }
}

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以按照以下步骤使用 `el-checkbox-group` 实现多选: 1. 在 Vue 组件中引入 `el-checkbox-group` 和 `el-checkbox` 组件: ```html <template> <el-checkbox-group v-model="checkedFruits"> <el-checkbox label="apple">Apple</el-checkbox> <el-checkbox label="banana">Banana</el-checkbox> <el-checkbox label="orange">Orange</el-checkbox> </el-checkbox-group> </template> <script> import { ElCheckboxGroup, ElCheckbox } from 'element-ui'; export default { components: { ElCheckboxGroup, ElCheckbox, }, data() { return { checkedFruits: [], }; }, }; </script> ``` 2. 定义一个数组 `checkedFruits` 用于存储选中的水果的值。 3. 在 `el-checkbox-group` 中使用 `v-model` 绑定 `checkedFruits` 数组,这样选中的水果值就会被存储在 `checkedFruits` 中。 4. 在 `el-checkbox` 组件中使用 `label` 属性指定水果的值。 5. 如果需要在表单中提交选中的水果值,可以将 `checkedFruits` 数组绑定到表单的 `v-model` 上,这样选中的水果值就会被提交给后端。例如: ```html <template> <form @submit.prevent="submitForm"> <el-checkbox-group v-model="checkedFruits"> <el-checkbox label="apple">Apple</el-checkbox> <el-checkbox label="banana">Banana</el-checkbox> <el-checkbox label="orange">Orange</el-checkbox> </el-checkbox-group> <button type="submit">Submit</button> </form> </template> <script> import { ElCheckboxGroup, ElCheckbox } from 'element-ui'; export default { components: { ElCheckboxGroup, ElCheckbox, }, data() { return { checkedFruits: [], }; }, methods: { submitForm() { // 提交表单时将选中的水果值发送到后端 console.log(this.checkedFruits); }, }, }; </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值