【星海出品】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>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js