【星海出品】VUE(四)

事件处理

事件内联JS语句(类似于onclick)

方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

App.vue关闭掉了,所以就要重新运行一下。

html 复制代码
<template>
    <h3>event demo</h3>
    <button @click="count++"> Sadd </button>
    <button @click="addCount"> Fadd </button>
    <p> {{ count }} </p>
</template>

<script>
export default{
  data(){
      return{
          msg: "Event",
          count: 0
      }
  },
  methods:{
      addCount(){
        this.count += 1
      }
  }
}
</script>

dblclick #双击

click #单机

函数传参

html 复制代码
<template>
    <h3>event demo</h3>
    <button @dblclick="count++"> Sadd </button>
    <!-- <button @click="addCount"> Fadd </button> -->
    <button @click="etest('hello')">ADD</button>
    <p> {{ count }} </p>
</template>

<script>
export default{
  data(){
      return{
          msg: "Event",
          count: 0
      }
  },
  methods:{
      etest: function (param1) {
          console.log("pa: ");
          console.log(param1);
          this.count += 1;
      }
  }
}
</script>

v-for item传递参数

html 复制代码
<template>
    <h3>event demo</h3>
    <button @dblclick="count++"> Sadd </button>
    <!-- <button @click="addCount"> Fadd </button> -->
    <button @click="etest('hello')">ADD</button>
    <p> {{ count }} </p>
    <h2> event </h2>
    <p @click="getNameHandler(item)" v-for="(item,index) of names" :key="index"> {{ item }} </p>
</template>

<script>
export default{
  data(){
      return{
          msg: "Event",
          count: 0,
          names:["wang","zhao","qian"]
      }
  },
  methods:{
      etest: function (param1) {
          console.log("pa: ");
          console.log(param1);
          this.count += 1;
      },
      getNameHandler: function (paam1) {
          console.log(paam1);
      },
  }
}
</script>
相关推荐
三月的一天6 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰6 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead12 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141223 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙32 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q5673152339 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple1 小时前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua1 小时前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 小时前
录音实时上传
前端·javascript
江号软件分享1 小时前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端