登录  /  注册
首页 > web前端 > js教程 > 正文

click在vue里怎么实现

coldplay.xixi
发布: 2020-11-24 15:59:40
原创
4669人浏览过

click在vue里实现的方法:首先新建html代码页面;然后在这个代码页面上创建【

】标签;接着创建点击事件函数;最后给点击按钮添加vue的点击事件,并保存html代码。

click在vue里怎么实现

本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。

click在vue里实现的方法:

1、新建一个html代码页面,然后在这个代码页面上创建一个<div>标签,同时个这个<div>标签添加一个id为app,然后在这个<div>标签里创建一个点击按钮。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div id=&quot;app&quot;&gt; &lt;input type=&quot;button&quot; value=&quot;点击我&quot; /&gt; &lt;/div&gt;</pre><div class="contentsignin">登录后复制</div></div><p>2、引入vue.js文件,创建一个<code><script>标签,在这个标签里面使用 new Vue({})进行vue的实例化。

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

3、创建点击事件函数。在vue官网给定的methods里面创建vue点击事件触发的方法(案例中创建点击事件触发时弹出一个alert弹出)。

methods:{
    test:function(){ //vue的点击触发事件
        alert("完成vue的点击事件")
    }
}
登录后复制

4、给点击按钮添加vue的点击事件。在点击按钮标签里面添加上@click="test"即可。

<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>
登录后复制

5、保存html代码,然后使用浏览器进行打开,在浏览器页面点击按钮事件,这个时候就可以看浏览器上弹出一个alert弹出框,表示vue点击事件已成功执行。

806830723de1f5074a4be6c34cd9ff5.png

全部代码:

<!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(视频)

以上就是click在vue里怎么实现的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
我要提问
来源:php中文网
收藏 点赞
上一篇:jquery怎样让div不显示 下一篇:jquery怎么让checkbox不选中?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号