溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

click在vue里實(shí)現(xiàn)的方法

發(fā)布時(shí)間：2020-11-25 10:21:49 來(lái)源：億速云 閱讀：634 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了click在vue里實(shí)現(xiàn)的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

click在vue里實(shí)現(xiàn)的方法：首先新建html代碼頁(yè)面；然后在這個(gè)代碼頁(yè)面上創(chuàng)建【<div>】標(biāo)簽；接著創(chuàng)建點(diǎn)擊事件函數(shù)；最后給點(diǎn)擊按鈕添加vue的點(diǎn)擊事件，并保存html代碼。

click在vue里實(shí)現(xiàn)的方法：

1、新建一個(gè)html代碼頁(yè)面，然后在這個(gè)代碼頁(yè)面上創(chuàng)建一個(gè)<div>標(biāo)簽，同時(shí)個(gè)這個(gè)<div>標(biāo)簽添加一個(gè)id為app，然后在這個(gè)<div>標(biāo)簽里創(chuàng)建一個(gè)點(diǎn)擊按鈕。

<div id="app">
    <input type="button" value="點(diǎn)擊我" />
</div>

2、引入vue.js文件，創(chuàng)建一個(gè)<script>標(biāo)簽，在這個(gè)標(biāo)簽里面使用 new Vue({})進(jìn)行vue的實(shí)例化。

<script type="text/javascript" src="js/vue.js" ></script>
<script>
    var app = new Vue({
    el:"#app"
})
</script>

3、創(chuàng)建點(diǎn)擊事件函數(shù)。在vue官網(wǎng)給定的methods里面創(chuàng)建vue點(diǎn)擊事件觸發(fā)的方法（案例中創(chuàng)建點(diǎn)擊事件觸發(fā)時(shí)彈出一個(gè)alert彈出）。

methods:{
    test:function(){ //vue的點(diǎn)擊觸發(fā)事件
        alert("完成vue的點(diǎn)擊事件")
    }
}

4、給點(diǎn)擊按鈕添加vue的點(diǎn)擊事件。在點(diǎn)擊按鈕標(biāo)簽里面添加上@click="test"即可。

<div id="app">
    <input type="button" value="點(diǎn)擊我" @click="test"/>
</div>

5、保存html代碼，然后使用瀏覽器進(jìn)行打開(kāi)，在瀏覽器頁(yè)面點(diǎn)擊按鈕事件，這個(gè)時(shí)候就可以看瀏覽器上彈出一個(gè)alert彈出框，表示vue點(diǎn)擊事件已成功執(zhí)行。

click在vue里實(shí)現(xiàn)的方法

全部代碼：

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>vue點(diǎn)擊事件</title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="點(diǎn)擊我" @click="test" />
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                methods: {
                    test: function() { //vue的點(diǎn)擊觸發(fā)事件
                        alert("完成vue的點(diǎn)擊事件")
                    }
                }
            })
        </script>
    </body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享click在vue里實(shí)現(xiàn)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手