Html中button元素type属性 or element-ui中的native-type属性

最新推荐文章于 2023-10-11 09:10:34 发布

lazy_tomato

最新推荐文章于 2023-10-11 09:10:34 发布

阅读量3.2k

点赞数

分类专栏： vue eleemnt-ui 文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/wswq2505655377/article/details/124168474

版权

vue 同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

eleemnt-ui

1 篇文章 0 订阅

订阅专栏

START

今天在使用element-ui的表单的时候，点击了一个普通的按钮，表单数据清空了。有点意思，写个文档记录一下。

`1.html中的button元素`

`代码`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lazy_tomato</title>
</head>

<body>

    <form action="http://www.baidu.com" method="get">
        <p>First name: <input type="text" name="fname" /></p>
        <p>Last name: <input type="text" name="lname" /></p>
       
        <!-- 1. 默认的提交事件,会走接口 -->
        <input type="submit" value="1.元素:input;类型:Submit" />

        <!-- 2. 就普通的按钮而已，不绑定事件的话，什么都不做-->
        <button type="button">2.元素:button;类型:button</button>

        <!-- 3. 类似第一条，默认的提交 -->
        <button type="submit">3.元素:button;类型:submit</button>

        <!-- 4.这个类型为重置的很少见，写这个博客的目的就是写它,它会清空form表单输入框的数据 -->
        <button type="reset">4.元素:button;类型:reset</button>
    </form>
</body>

</html>

`运行截图`

在这里插入图片描述

`总结`

type="button"    =>    默认的按钮
type="submit"    =>  会触发表单的默认提交
type="reset"     =>  会触发表单的默认重置

2.element-ui中的button

`代码`

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button native-type="button">button</el-button>
        <el-button native-type="submit">submit</el-button>
        <!-- reset之后，会影响vue双向数据绑定的数据展示 -->
        <el-button native-type="reset">reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "lazy_tomato",
  data() {
    return {
      form: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
</style>

`运行截图`

在这里插入图片描述

END

UI组件底层还是用的html元素的基础上去做的封装的。
elemnt-ui这里保留了原本的button元素的默认type属性。
点击类型为reset的按钮之后，数据会被清楚，会影响vue双向数据绑定的数据展示。

lazy_tomato

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html中button元素type属性 or element-ui中的native-type属性

今天在使用element-ui的表单的时候，点击了一个普通的按钮，表单数据清空了。有点意思，写个文档记录一下。本地演示的demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
复制链接

扫一扫