Vue事件处理

最新推荐文章于 2024-03-31 21:19:53 发布

@、

最新推荐文章于 2024-03-31 21:19:53 发布

阅读量55

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43608642/article/details/117439214

版权

Vue事件处理

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h3 style="color: crimson">事件处理</h3>
      <p style="color: aqua">监听事件</p>
      <p>快乐指数：{{count}}</p>
      <button @click="count+=1">大笑 高兴 开心 嗨皮</button>
      <p style="color: aqua">使用方法调用JavaScript</p>
      <button @click="show">输出</button>
      <p style="color: aqua">内联处理器的方法</p>
      <button @click="show1('我爱你')">输出</button>
      <button @click="show2('表单不能提交',$event)">特殊变量</button>
      <p style="color: aqua">事件修饰符</p>
      <div @click="kaixin">
        <p>开心指数{{count1}}</p>
        <p>悲伤指数：{{count2}}</p>
        <!-- .stop阻止单击事件继续冒泡 -->
        <button @click.stop="beishang">便秘 踩狗屎 下雨</button>
        (使用.stop修饰符则开心指数不会下降)
      </div>
      <p style="color: aqua">点击事件将只会触发一次(.once)</p>
      <button @click.once="beishang">便秘 踩狗屎 下雨</button>
      <p style="color: aqua">按键修饰符(enter)</p>
      名称：
      <input v-on:keyup.enter="submit" />
    </div>
  </body>
</html>
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      count: 0,
      message: "六一儿童节快乐！",
      count1: 100,
      count2: 0,
    },
    methods: {
      show: function () {
        // `this` 在方法里指向当前 Vue 实例
        alert(this.message);
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName);
        }
      },
      show1: function (message) {
        alert(message);
      },
      show2: function (message, event) {
        if (event) {
          event.preventDefault();
        }
        alert(message);
      },
      kaixin: function () {
        this.count1 = this.count1 - 1;
      },
      beishang: function () {
        this.count2 = this.count2 + 1;
      },
      submit: function () {
        alert("输入已经提交！");
      },
    },
    computed: {},
  });
</script>