Vue的事件处理

小波

2年前更新

180

文章目录[隐藏]

内联事件处理器
方法事件处理器☆

我们可以使用v-on指令(简写为@)来监听DOM事件，并在触发时执行对应的JavaScript代码。

用法：v-on:事件类型="函数"或者@事件类型="函数"。

内联事件处理器

事件被触发时执行的内联JavaScript语句(与onclick相似)


<template>
  <view>
    <button @click="number++">自增{{ number }}</button>
  </view>
</template>
<template>
  <view>
    <button @click="number++">自增{{ number }}</button>
  </view>
</template>
<template>
	<view>
		<button @click="number++">自增{{ number }}</button>
	</view>
</template>


<script>
export default {
    data() {
      return {
        number : 0,
      }
    }
  }
</script>
<script>
export default {
    data() {
      return {
        number : 0,
      }
    }
  }
</script>
<script>
export default {
		data() {
			return {
				number : 0,
			}
		}
	}
</script>

方法事件处理器☆

一个指向组件上定义的方法属性名或路径

所有的方法和函数都写在methods里面

methods: {

函数....

}

所有写在data里面的值在函数里面都可以用this来读取。


<template>
  <view>
    <button @click="addnumber">自增{{ number }}</button>
  </view>
</template>
<template>
  <view>
    <button @click="addnumber">自增{{ number }}</button>
  </view>
</template>
<template>
	<view>
		<button @click="addnumber">自增{{ number }}</button>
	</view>
</template>


<script>
export default {
    data() {
      return {
        number : 0,
      }
    },
    methods: {
      addnumber(){
        this.number++
      }
    }
  }
</script>
<script>
export default {
    data() {
      return {
        number : 0,
      }
    },
    methods: {
      addnumber(){
        this.number++
      }
    }
  }
</script>
<script>
export default {
		data() {
			return {
				number : 0,
			}
		},
		methods: {
			addnumber(){
				this.number++
			}
		}
	}
</script>

评分

欢迎为Ta评分

赞赏