＜el-button @click=“getByName(name)“＞点击＜/el-button＞，name的问题，是否能用this.name

Starry Sky001

于 2022-02-27 12:10:10 发布

阅读量873

点赞数 2

分类专栏：次要的日常笔记文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_45928041/article/details/123162193

版权

次要的日常笔记专栏收录该内容

17 篇文章

订阅专栏

这是一个关于Vue.js的示例代码，展示了如何在模板中使用`<el-input>`和`<el-button>`组件。`v-model`用于双向数据绑定，`@change`和`@click`事件监听输入变化和按钮点击。在`getByName`方法中，参数`name`用于打印输入值。注意，`this.name`在方法内可以直接访问到数据属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、代码为

<template>
  <div>
  <el-input v-model="name" @change="getByName" />
  <br>
  <el-button @click="getByName(name)">点击</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      search: "",
      name:"小"
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getByName(name) {
      console.log(name)
    },
  },
};
</script>

2、主要看向这两句

  <el-button @click="getByName(name)">点击</el-button>

 console.log(name)

这里的this为vue对象
第一句的name不能用，this.name不然反而报错
第二句的name，如果方法有传入参数name，则正常使用name，如果没有定义，使用name就Undefined，或者使用this.name直接也可以拿到数据