Vue界面交互 - 按钮buttn.click函数使用


Vue界面交互 - 按钮buttn.click函数使用-开发框架文库

Vue界面交互 - 按钮buttn.click函数使用

一、绑定click事件

在 button 按钮的click事件绑定了一个 changeName 方法:

Vue界面交互 - 按钮buttn.click函数使用

HTML 全选
<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <div id="test">
      <p>学习案例1:</p>
      <span>通过Axios调用Api接口返回数据:</span>
      <div>
        Code: {{code}}<br>
        Name: {{name}}
      </div>
    </div>
    <div>
      <p>学习案例2:</p>
      <p>{{userName}}</p>
      <button @click="changeName">点我改名</button>
    </div>
  </div>
</template>

 

二、methods 属性定义函数 changeName()

Vue界面按钮交互click函数使用

JavaScript 全选
methods: {
    loadData() {
      var _T = this;
      this.axios
        .post("/api/get.aspx")
        .then(function (res) {
          _T.code = res.data.code;
          _T.name = res.data.name;
        })
        .catch(function (res) {
          console.log(res);
        });
    },
    //click事件绑定的方法
    changeName() {
      this.userName = "WWW.CSCODE.NET | 开发框架文库";
    },
  }

三、运行程序测试

Vue界面按钮交互click函数使用

开发框架教程-开发框架文库

 

版权声明:本文为开发框架文库发布内容,转载请附上原文出处连接
C/S框架网
评论列表

发表评论

评论内容
昵称:
关联文章

Vue界面交互 - 按钮buttn.click函数使用
Web端使用VUE调用WebApi接口实现用户登录及采用Token方式数据交互
Windows服务允许服务使用界面交互(C#/ProjectInstaller)
VUE生命周期DOM对象方法、回调函数和属性详解
Web开发框架-VUE使用Axios调用后台WebAPI接口
使用Vue+VSCode新建HelloWorld项目
DevExpress GridView 表格内嵌ButtonEdit按钮列图片按钮Click事件
WEB开发框架开发环境:VSCode+VUE+Element UI
WinFramework轻量级开发框架 - 界面扩展按钮-自定义按钮
关于Click事件sender参数问题
Vue指令大全 - 开发实践
Windows服务弹出Winform窗体应用程序实现桌面交互
Vue+Element-UI客户管理页面查询功能实现
Vue开发笔记大全
C#构造函数,静态构造函数,私有构造函数详解
使用DevExpress的SplitContainerControl组件显示和隐藏界面区域
GoF设计模式:中介者模式(Mediator Pattern)—协调多个对象之间的交互
VSCode开发Vue项目文件目录结构说明
Vue+VsCode输出HelloWorld项目及项目结构解析
Activator.CreateInstance 使用指定类型的默认构造函数来创建该类型的实例