事件处理简单案例

事件处理简单案例

源码 

<template>
  <div class="about">
    <header>
      <button @click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
      <!-- `greet` 是在下面定义的方法名 -->
      <button @click="greet">点我弹出对话框</button>
    </header>
    <article>
      <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
      <button @click="one(), two()">
        点我连续执行函数事件
      </button>
      <br><br>
      <button @click="say('hi')">Say hi</button>
      <button @click="say('what')">Say what</button>
    </article>
    <footer><button @click="start()">开启文字滚动</button>
      <button @click="cease()">暂停文字滚动</button>
      <h2 :style="{ color: '#e49356' }">{{ txt }}</h2>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      txt: "可以在这里添加广告!",
      counter: 0
    };
  },
  methods: {
    start() {
      //开启定时器
      if (this.myTimer != null) return;
      this.myTimer = setInterval(() => {
        //获取字符串的第一个字符
        let start = this.txt.substring(0, 1);
        //获取字符串的第二个字符
        let end = this.txt.substring(1);
        //将第一个字符和第二个字符拼接
        this.txt = end + start;
      }, 200);
    },
    cease() {
      clearInterval(this.myTimer);
      this.myTimer = null;
    },
    greet(event) {
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
        alert(event.target.tagName)
      }
    },
    one() {
      alert("第一个事件处理器逻辑...")
    },
    two() {
      alert("第二个事件处理器逻辑...")
    },
    say(message) {
      //传值给message
      alert(message)
    },
  }
}

</script>
<style>
header,
article,
footer {
  width: 50rem;
  height: 30rem;
  margin: auto;
  border: 1px solid black;
}
</style>

运行结果