Home > Article > Web Front-end > How to implement click in vue

How to implement click in vue

coldplay.xixiOriginal: 2020-11-24 15:59:405192browse

How to implement click in vue: first create a new HTML code page; then create a [
] tag on this code page; then create a click event function; finally add a vue click event to the click button , and save the html code.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

How to implement click in vue:

1. Create a new html code page, and then create a <div># on this code page. ## tag, and add an id to the <div> tag at the same time as app, and then create a click button in this <div> tag. <pre class="brush:php;toolbar:false"><div id="app"> <input type="button" value="点击我" /> </div></pre>2. Introduce the vue.js file, create a <p><script><code> tag, and use new Vue({})<code> in this tag to create an instance of vue change. <pre class="brush:php;toolbar:false"><script type="text/javascript" src="js/vue.js" ></script> <script> var app = new Vue({ el:"#app" }) </script></pre></script></p>3. Create a click event function. Create a method to trigger the vue click event in the methods given on the vue official website (in the case, an alert popup pops up when the click event is triggered). <p><pre class="brush:php;toolbar:false">methods:{ test:function(){ //vue的点击触发事件 alert("完成vue的点击事件") } }</pre></p>4. Add a vue click event to the click button. Just add <p>@click="test"<code> in the click button label.
<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>
5. Save the html code, and then open it with a browser. Click the button event on the browser page. At this time, you can see an alert pop-up box pop up on the browser, indicating that the vue click event has been successfully executed.

All codes:
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>vue点击事件</title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="点击我" @click="test" />
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                methods: {
                    test: function() { //vue的点击触发事件
                        alert("完成vue的点击事件")
                    }
                }
            })
        </script>
    </body>
</html>
Related free learning recommendations:
JavaScript (video)

The above is the detailed content of How to implement click in vue. For more information, please follow other related articles on the PHP Chinese website!

How to implement click in vue

Related articles