vue的事件对象，方法执行

偏执的太偏执、 2022-01-06 04:43 201阅读 0赞

方法都写在methods重，有两种写法：  
1、

getMsg:function()\{

alert();

\}, 这种写法就是对象中的方法

2、

getMsg1()\{

alert();

\}注意没有function,否则报错

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

或者@click这种写法

\----------------

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

![1382212-20190421223714230-771241365.png][]

<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

[1382212-20190421223714230-771241365.png]: /images/20211228/742367db1d4c4233aa25e5fbbc1bb2cc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue实例方法/事件

Vue实例方法/事件 * vm.$on( event, callback ) * vm.$once( event, callback ) * vm.$of...

布满荆棘的人生/ 2024年04月17日 05:58/ 0 赞/ 71 阅读

相关 vue 阻止事件冒泡常用的方法

![3d663eb17366489c887301c0193ee88a.jpeg][] 在 Vue 中，阻止事件冒泡有两种常用方法： 1. 使用 \`event.stopP

桃扇骨/ 2023年10月11日 23:07/ 0 赞/ 115 阅读

相关 Vue.js note4（事件对象$event&事件修饰符&vue的计算属性）

1、事件对象语法：`<div @click=‘fn($event)’></div>`中，`$event`为事件对象（固定写法）作用：记录事件相关的信息

超、凢脫俗/ 2023年02月27日 10:40/ 0 赞/ 15 阅读

相关事件对象的preventDefault()方法

> event.preventDefault()取消事件的默认动作 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

太过爱你忘了你带给我的痛/ 2022年12月31日 01:24/ 0 赞/ 117 阅读

相关 Vue中执行事件的两种写法

①标准写法 <button v-on:click="方法()">点击执行方法</button> ②简写写法 <button @click="方法(

柔情只为你懂/ 2022年12月25日 00:49/ 0 赞/ 182 阅读

相关如何阻止事件冒泡（事件对象方法）

如何阻止事件冒泡：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

今天药忘吃喽~/ 2022年12月21日 00:46/ 0 赞/ 194 阅读

相关 vue 事件传递事件参数与其他参数的方法

e v e n t （必须写成 event（必须写成 event（必须写成event） <input type="file" accept="image/"

水深无声/ 2022年03月28日 03:28/ 0 赞/ 316 阅读

相关 Vue事件定义/执行方法获取/改变数据执行方法传值以及事件对象

下面，我练习的这串代码中对理解Vue事件、定义/执行方法、获取/改变数据，和执行方法传值以及事件对象，有一定的帮助。 <template> <!

小灰灰/ 2022年03月25日 10:40/ 0 赞/ 306 阅读

相关 vue的事件对象，方法执行

方法都写在methods重，有两种写法： 1、 getMsg:function()\{ alert(); \}, 这种写法就是对象中的方法 2、 getMsg1(

偏执的太偏执、/ 2022年01月06日 04:43/ 0 赞/ 202 阅读

相关 Vue的数据、事件和方法实战

目录一点睛 1 event.target.value 2 this 的用法 3 事件绑定：v-on 4 v-on 的简写 5 插值表达式 6 v-onc

迷南。/ 2021年07月24日 15:18/ 0 赞/ 312 阅读