Vue事件綁定

本文轉載自查看原文 2020-02-20 10:20 832 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue 樣式綁定、事件綁定 Vue樣式綁定、事件綁定 vue for 綁定事件 vue綁定回車事件 vue的事件綁定 Vue事件綁定原理 vue的事件綁定 vue指令和事件綁定 Vue - 事件綁定 vue事件的綁定