zoukankan      html  css  js  c++  java
  • Vue事件绑定

    v-on:

    v-on是给元素绑定事件,其简写是“@+事件名”

    event事件:

    将event元素传递给函数时,在传递时一定要写成“$event”,而函数中的形参是什么都无所谓了。

    事件修饰符:

    • .prevent:阻止默认时间的执行;
    • .stop:event.stopPropagation,阻止事件冒泡;
    • .capture:事件捕获;
    • .once:事件之执行一次;
    • .self:代表当前这个被点击的元素自身;
    • .passive:在页面滚动的时候,告诉浏览器不会阻止默认的行为,从而让滚动更加顺畅
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
          <title>vue事件绑定</title>
      </head>
      
      <body>
          <h4>v-on:</h4>
      
          <div id="v-on-app">
              <ul>
                  <li v-for="book in books" key={{book}}} v-on:click="SubPrice(book.price)">{{book.title}}:
                      {{book.price}}</li>
              </ul>
              <h4>event事件</h4>
             
              <br><a href="https://www.baidu.com/" v-on:click=gotoWebsite($event)> 跳转链接</a>
              <h4>事件修饰符</h4>
              <a href="https://www.baidu.com/" @click.prevent=gotoWebsite2> 修饰符跳转链接</a>
          </div>
      
      
          <script>
              new Vue({
                  el: "#v-on-app",
                  data: {
                      books: [{
                          title: '计算机原理',
                          price: 65,
                      }, {
                          title: "数据结构",
                          price: 70
                      }]
                  },
                  methods: {
                      SubPrice(price) {
                          console.log(price)
                          // Vue.set(this.books.price = this.books.price + 1)
                      },
                      gotoWebsite(event) {
                          event.preventDefault()
                          window.location = "https://www.360.cn"
                      },
                      gotoWebsite2(){
                          window.location = "https://www.360.cn"
                      }
                  }
              })
          </script>
      </body>
      
      </html>
  • 相关阅读:
    dedecms代码研究五
    dedecms代码研究四
    判断有没有真正点击打印
    SAP中删除假脱机请求
    商品扩地点不成功
    记录一些使用的abap小程序帮助开发
    sap abap 程序 中使用 FTP . <转载>
    SM37 后台调试
    ftp上传下载| 图片上传下载
    ALV调用的几个标准函数 <转自 思微随想>
  • 原文地址:https://www.cnblogs.com/xshan/p/12334577.html
Copyright © 2011-2022 走看看