扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中在data里面调用method方法的实现
  • 890

0
分享到

Vue中在data里面调用method方法的实现

2024-04-02 19:04:59 890人浏览 薄情痞子
摘要

目录今天我用到了Element的一个组件其组件的代码如下页面渲染的效果如下如果想要在表格里面添加按钮事件的话今天我用到了Element的一个组件 如下： 其组件的代码如下 // t

今天我用到了Element的一个组件

如下：

其组件的代码如下

// template内容：
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
// data数据内容
 tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 21,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
      ],

如果想要在表格中加入一个按钮，是可以加进去的（Element的表格组件是可以加入元素标签的，直接写在空所对应的表格里面即可），代码如下：

// 要改变data里面的内容即可
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀区金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
     <el-button type="primary" plain>确认</el-button>
     ),
  }]
}

页面渲染的效果如下

注意，这个地方如果你想给里面的按钮添加事件的话，不能够直接在按钮里面加 @click 或者 onclick ，这样添加按钮事件，会产生错误，效果如下：

// 先是添加@click的方法
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀区金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
    <el-button type="primary" plain @click="showMe()">确认</el-button>
    ),
  }],
}

1、如果用@click的方法，在代码块里面就会显示错误信息：

       

2、如果使用onclick方法，代码块不会报错，在页面渲染的控制台会显示错误：

// 使用的onclick方法如下：
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀区金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
    <el-button type="primary" plain onclick="showMe">确认</el-button>
    ),
  }]
}

效果如下：

如果想要在表格里面添加按钮事件的话

代码如下：

{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀区金沙江路 1519 弄",
  children: [{
     id: 21,
     date: "2016-05-01",
     name: "王小虎",
     address: (
        <el-button type="primary" plain onclick={() => this.showMe()}>确认</el-button>
      ),
  }]
}

这种在data数据里面添加 οnclick={() => this.函数名()} 是不会出现错误的

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: Vue中在data里面调用method方法的实现

本文链接: https://lsjlt.com/news/150567.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中在data里面调用method方法的实现
    目录今天我用到了Element的一个组件其组件的代码如下页面渲染的效果如下如果想要在表格里面添加按钮事件的话今天我用到了Element的一个组件 如下： 其组件的代码如下 // t...
    99+
    2024-04-02
  • Vue中在data里如何调用method方法
    这篇文章主要介绍“Vue中在data里如何调用method方法”，在日常操作中，相信很多人在Vue中在data里如何调用method方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue中在data里如何调...
    99+
    2023-06-30
  • vue中data里面的数据相互使用方式
    目录data里面的数据相互使用具体代码如下data里的数据不能相互引用问题data里面的数据相互使用 今天在写代码的时候，遇到一个问题，我想使用data里面的一个对象使用data里面...
    99+
    2024-04-02
  • Android中在WebView里实现Javascript调用Java类的方法
    为了方便网页和Android应用的交互，Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制。只要调用addJavascriptInte...
    99+
    2022-06-06
    用java 方法 webview JavaScript Android
  • 在Python里面调用Golang代码的方法
    这篇文章主要介绍了在Python里面调用Golang代码的方法，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。调用编译后的动态库文件，报头文件错误原因：不同平台下编译的add.so 不能通用，Windows下可以运行的so...
    99+
    2023-07-06
  • 如何在PHP中实现参数前面加“…”的调用方法
    在PHP中实现参数前面加“...”的调用方法，其实就是使用可变长度参数（variadic argument）。可变长度参数允许函数接受任意数量的参数。在PHP中，通过在函数定义时在参数...
    99+
    2024-03-12
    php 可变参数 php 参数展开 php 参数列表
  • vue中为何方法要写在methods的里面
    目录vue中为何方法要写在methods里面1.methods是什么？2.如果把方法写在data中会怎么样？Vue选项 Vue中methods选项1.在Vue构造器内部调用方法&md...
    99+
    2022-11-13
    vue中方法 vue的methods vue中methods方法
  • vue中data里面的数据如何相互使用
    本篇内容主要讲解“vue中data里面的数据如何相互使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue中data里面的数据如何相互使用”吧!data里面的数据相互使用今天在写代码的时候，遇...
    99+
    2023-06-30
  • VUE在线调用阿里Iconfont图标库的方法
    前言 多年前我本是个服务端小白，随着行业内卷，硬是被熬成了前端小白。。。开个玩笑，只是个人比较喜欢学习技术罢了！本章将带领大家以另一个高端的方式打开阿里Iconfont图标库，过去，...
    99+
    2024-04-02
  • vue data中的return使用方法示例
    目录一、vue 里面的data return 是什么？二、如何使用1.vue 双向绑定 v-model2.带有 ":"的属性 比如:class、:id等等3. 标...
    99+
    2024-04-02
  • vue 调用外部js里的方法
    Vue是一个非常流行的JavaScript框架，广泛应用于Web应用程序的开发中。Vue框架提供了许多方便的功能，使得我们开发Web应用程序的过程变得非常简单。然而，在使用Vue框架开发应用程序的过程中，我们有时需要调用外部JS文件中的方法...
    99+
    2023-05-14
  • vue实现面包屑的方法
    vue中面包屑的实现方法，供大家参考，具体内容如下 面包屑是什么： 面包屑是作为辅助和补充的导航方式（secondary navigation scheme），它能让用户知道在网站或...
    99+
    2024-04-02
  • 如何在Vue中调用if方法（两种方法）
    Vue是一种流行的JavaScript框架，它帮助开发人员更轻松地构建交互式Web应用程序。在Vue中，条件语句是必不可少的一部分，经常使用if语句来根据不同的条件显示或隐藏HTML元素。在本文中，我们将学习如何在Vue中调用if方法。使用...
    99+
    2023-05-14
  • 在Java中实现远程方法调用(转)
    在Java中实现远程方法调用(转)[@more@]一、Java中的远程方法调用 远程方法调用（Remote Method Invocation, RMI）是Java1.1引入的分布式对象软件包，它的出现简化了在多台机器上的Java应用之间的...
    99+
    2023-06-03
  • PHP中调用JS方法的实现方法
    PHP是一种广泛应用于网站开发的服务器端脚本语言，而JS（JavaScript）则是一种用于网页交互的客户端脚本语言。在开发网站时，我们有时需要在PHP代码中调用JS方法来实现一些特定...
    99+
    2024-03-04
    php调用js php js互动 php前端交互
  • vue的v-if里实现调用函数
    目录vue v-if调用函数methods属性这样配置 使用v-if时的注意点1.v-if和v-else或v-else-if之间不能添加其他元素2.v-if 为同一类型组件...
    99+
    2024-04-02
  • 在PHP中如何实现方法在其他文件中的调用？
    在PHP中如何实现方法在其他文件中的调用 对于PHP开发者来说，有时候我们会需要在一个文件中编写某些方法，然后在其他文件中调用这些方法。这种情况下，我们可以使用PHP的命名空间（nam...
    99+
    2024-03-05
    php 函数调用 文件路径定位
  • vue中的公共方法调用方式
    目录vue公共方法调用（1）如果是全局（多页面）使用（2）如果是单页面使用vue如何封装和调用公共方法封装公共方法调用公共方法vue公共方法调用 首先，在assets文件夹下，新建j...
    99+
    2024-04-02
  • PHP调用方法：参数前面加“…”的实现方式
    PHP是一种常用的服务器端脚本语言，广泛应用于网站开发领域。在PHP中，我们经常需要调用函数或方法来实现特定的功能。有时候，我们需要传递不定数量的参数给一个方法，这时就可以使用参数前面...
    99+
    2024-03-12
    php 可变参数 参数展开操作符 可变长参数
  • DEDECMS实现在标签中嵌套调用SQL的方法
    本文以实例讲述了DEDEcms实现在标签中嵌套调用SQL的方法，对于dedecms的二次开发来说非常简单实用，实例代码如下所示： 复制代码代码如下:{dede:field.id runphp='yes'} $tsq...
    99+
    2022-06-12
    DEDECMS 标签 嵌套调用 SQL 方法
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作