25.VUE学习之-单击和双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
    <li v-for="(v,k) in comments">
        {{v.id}} - {{v.content}}
        <button v-on:click="abc(v.id)">v-on单击事件</button>
        <button @click="abc(v.id)">@单击事件</button><!--@和上面的v-on效果是一样的-->
        <button @dblclick="abc(v.id)">@dblclick双击事件</button><!--@和上面的v-on效果是一样的-->

    </li>



</div>
<script>
    var app = new Vue({
        el: '#hdcms',
        data: {
            //当前用户输入内容
            comments: [
                {id: 2, content: 'HDPHP'},
                {id: 4, content: 'HDCMS'},
                {id: 1, content: '后盾人'},
                {id: 3, content: '向军老师'},
            ]
        },
        methods: {
            abc(k){
                console.log(k);
            },
        }
    });
</script>
</body>
</html>

效果:

posted @   HaimaBlog  阅读(3452)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· 从 Windows Forms 到微服务的经验教训
点击右上角即可分享
微信分享提示