Vueでクリックを実装する方法-jsチュートリアル-php.cn

Vueでクリックを実装する方法

coldplay.xixi

リリース： 2020-11-30 14:23:21

オリジナル

5192 人が閲覧しました

vue でクリックを実装する方法: 最初に新しい HTML コードページを作成し、次にこのコードページに [
] タグを作成し、次にクリックイベント関数を作成し、最後に vue のクリックイベントを追加します。ボタンをクリックして、HTML コードを保存します。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

vue でクリックを実装する方法:

1. 新しい HTML コードページを作成し、このコードページに <div># を作成します。 .##タグを追加し、appと同時に<div>タグにidを追加し、この<div>タグ内にクリックボタンを作成します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div id="app"> <input type="button" value="点击我" /> </div></pre><div class="contentsignin">ログイン後にコピー</div></div></p>2. vue.js ファイルを導入し、<p><script><code> タグを作成し、このタグ内でnew Vue({}) を使用してVue 変更のインスタンス。
<script type="text/javascript" src="js/vue.js" ></script>
<script>
    var app = new Vue({
    el:"#app"
})
</script>
ログイン後にコピー
3. クリックイベント関数を作成します。 vue公式サイトに記載されているメソッドで、vueのクリックイベントをトリガーするメソッドを作成します（この場合、クリックイベントがトリガーされるとアラートポップアップが表示されます）。
methods:{
    test:function(){ //vue的点击触发事件
        alert("完成vue的点击事件")
    }
}
ログイン後にコピー
4. クリックボタンに vue クリックイベントを追加します。クリックボタンのラベルに
@click="test" を追加するだけです。
<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>
ログイン後にコピー
5. HTML コードを保存し、ブラウザで開きます。ブラウザページ上のボタンイベントをクリックすると、ブラウザ上にアラートポップアップボックスが表示されます。 vue クリックイベントが正常に実行されたことを示します。
すべてのコード:
<!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>
ログイン後にコピー
関連する無料学習の推奨事項:
JavaScript (ビデオ)