当前位置: 首页 > news >正文

vue的事件对象,方法执行

方法都写在methods重,有两种写法:
1、

getMsg:function(){
alert();
},  这种写法就是对象中的方法
2、
getMsg1(){

alert();
}注意没有function,否则报错

对于view上面的事件有两种方式定义: v-on:click="""这种方式

或者@click这种写法

 

----------------

实现一个功能:当点击请求数据按钮时,会将数据赋值

<template>
  <div id="app">
{{msg}}
<br>
  <button v-on:click="getMsg()">获取 </button>
  <button @click="getMsg1()">获取1</button>

  <button @click="requestData()">点击按钮进行请求赋值 </button>

  <div>
    <ul>
        <li  v-for="(item,key) in list">
        {{key}}------  {{item}}
        </li>
    </ul>
  </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'fsafasad',
       list:[]
    }
  },
  methods:{
    getMsg:function(){
      alert();
    
    },
   
     getMsg1(){

      alert();
    },
    requestData(){

      for(var i=0;i<10;i++){  
        this.list.push("这是第"+ i +"条数据");  //这地方就是点击按钮时,会重新赋值给model,model改变之后,view就会也跟着改变,这是双向绑定
      }
    }
}
}
</script>


<style>


</style>

 

转载于:https://www.cnblogs.com/fpcbk/p/10747372.html

相关文章:

  • CAD图纸转换成高质量的彩色PDF格式如何操作?
  • 光伏工商业屋顶 Lora 组网监控方案
  • 莫等闲,白了少年头,空悲切!
  • 2017-11-28 在线编程网站对中文代码的支持
  • python 构造一个可以返回多个值的函数
  • 【多图警告】学会JavaScript测试你就是同行中最亮的仔(妹)
  • dict、defaultdict 和 OrderedDict 比较
  • SpringMVC初写(四)上传和下载功能的实现
  • 19-04-25
  • CentOS7下使用NFS文件共享给Window server 2012
  • 从技术人视角看闪电网络之微支付通道
  • java基础 数据类型转换
  • 即将到来的 Debian 10 Buster 发布版的新特点
  • server 2016 安装web+DNS服务
  • xtrabackup2.4选项参考
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • Java 最常见的 200+ 面试题:面试必备
  • JS基础之数据类型、对象、原型、原型链、继承
  • php的插入排序,通过双层for循环
  • Python打包系统简单入门
  • 大主子表关联的性能优化方法
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 工程优化暨babel升级小记
  • 技术发展面试
  • 排序算法之--选择排序
  • 微信端页面使用-webkit-box和绝对定位时,元素上移的问题
  • 阿里云ACE认证学习知识点梳理
  • ​HTTP与HTTPS:网络通信的安全卫士
  • #stm32整理(一)flash读写
  • #考研#计算机文化知识1(局域网及网络互联)
  • (4)事件处理——(7)简单事件(Simple events)
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (十八)SpringBoot之发送QQ邮件
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (转)linux 命令大全
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .gitignore文件—git忽略文件
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码?获取浏览器内用户信息?...
  • .NetCore 如何动态路由
  • .NET命名规范和开发约定
  • .NET下的多线程编程—1-线程机制概述
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?
  • // an array of int
  • /bin/bash^M: bad interpreter: No such file or directory
  • @Autowired自动装配
  • [20171113]修改表结构删除列相关问题4.txt
  • [BJDCTF 2020]easy_md5
  • [C++]C++类基本语法
  • [codevs 2822] 爱在心中 【tarjan 算法】
  • [HDU3710]Battle over Cities
  • [HEOI2013]ALO
  • [JavaWeb]—Spring入门
  • [java进阶]——方法引用改写Lambda表达式